{"id":16439148,"url":"https://github.com/posva/vue-prop-data-fallback","last_synced_at":"2025-07-23T15:32:40.006Z","repository":{"id":46745746,"uuid":"152896622","full_name":"posva/vue-prop-data-fallback","owner":"posva","description":"Vue mixin to support an optional prop by falling back to a local data","archived":false,"fork":false,"pushed_at":"2021-09-27T22:21:23.000Z","size":2911,"stargazers_count":31,"open_issues_count":11,"forks_count":1,"subscribers_count":3,"default_branch":"master","last_synced_at":"2024-12-28T00:07:17.277Z","etag":null,"topics":[],"latest_commit_sha":null,"homepage":"","language":"JavaScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"mit","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/posva.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":".github/CONTRIBUTING.md","funding":".github/funding.yml","license":"LICENSE","code_of_conduct":".github/CODE_OF_CONDUCT.md","threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null},"funding":{"github":"posva","custom":"https://www.paypal.me/posva"}},"created_at":"2018-10-13T17:25:35.000Z","updated_at":"2021-11-28T09:23:24.000Z","dependencies_parsed_at":"2022-08-30T04:21:40.406Z","dependency_job_id":null,"html_url":"https://github.com/posva/vue-prop-data-fallback","commit_stats":null,"previous_names":[],"tags_count":3,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/posva%2Fvue-prop-data-fallback","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/posva%2Fvue-prop-data-fallback/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/posva%2Fvue-prop-data-fallback/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/posva%2Fvue-prop-data-fallback/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/posva","download_url":"https://codeload.github.com/posva/vue-prop-data-fallback/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":232615201,"owners_count":18550648,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2022-07-04T15:15:14.044Z","host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":[],"created_at":"2024-10-11T09:08:10.413Z","updated_at":"2025-01-05T16:52:51.047Z","avatar_url":"https://github.com/posva.png","language":"JavaScript","funding_links":["https://github.com/sponsors/posva","https://www.paypal.me/posva"],"categories":[],"sub_categories":[],"readme":"# Vue Prop with Data fallabck [![Build Status](https://badgen.net/circleci/github/posva/vue-prop-data-fallback)](https://circleci.com/gh/posva/vue-prop-data-fallback) [![npm package](https://badgen.net/npm/v/vue-prop-data-fallback)](https://www.npmjs.com/package/vue-prop-data-fallback) [![coverage](https://badgen.net/codecov/c/github/posva/vue-prop-data-fallback)](https://codecov.io/github/posva/vue-prop-data-fallback) [![thanks](https://badgen.net/badge/thanks/♥/pink)](https://github.com/posva/thanks)\n\n\u003e Vue mixin to support an optional prop that falls back to a local data\n\n## Installation\n\n```sh\nnpm install vue-prop-data-fallback\n```\n\n## Usage\n\nThe example below will create a prop named `value`, a local variable `_$value` (the fallback) and a computed property `$value`.\n\n```vue\n\u003ctemplate\u003e\n  \u003cinput v-model=\"$value\"\u003e\n\u003c/template\u003e\n\n\u003cscript\u003e\nimport { propWithDataFallback } from 'vue-prop-data-fallback'\n\n// MySearch.vue\nexport default {\n  mixins: [propWithDataFallback('value')],\n\n  methods: {\n    doSomething() {\n      this.$value // the prop or the local value\n      // it can be mutated normally\n      // this will either change the local variable or emit an event\n      this.$value = 'new value'\n    },\n  },\n}\n\u003c/script\u003e\n```\n\nNow the search input's value can be optionally controlled by the parent:\n\n```html\n\u003c!-- no control over the value --\u003e\n\u003cmy-search/\u003e\n\u003cmy-search :value.sync=\"parentValue\"/\u003e\n```\n\n## API\n\n### `propWithDataFallback(prop: string, event?: string, propType?: Object, options?: { data: string, computed: string, initialValue: any }) =\u003e mixinObject`\n\n- `prop`: name of the prop that should be created\n- `event`: name of the event that should be emitted to enable the usage of `.sync` or `v-model`. Defaults to `'update:' + prop` (to enable the `.sync` modifier by default)\n- `propType`: value provided to the prop option. Can be a type like `String`, `Boolean`, an array of types or an object (pretty much anything [here](https://vuejs.org/v2/guide/components-props.html#Prop-Validation)). Defaults to `{ required: false }`\n- `options`: extra options to customize the names of the data and computed properties\n  - `data`: name of the property added to data. Defaults to `'_$' + prop`\n  - `computed`: name of the property added to computed. Defaults to `'$' + prop`\n  - `initialValue`: provides an initial value to be used when no prop is provided\n\n## License\n\n[MIT](http://opensource.org/licenses/MIT)\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fposva%2Fvue-prop-data-fallback","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fposva%2Fvue-prop-data-fallback","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fposva%2Fvue-prop-data-fallback/lists"}