{"id":25825641,"url":"https://github.com/posrix/vue-dynamic-props","last_synced_at":"2025-02-28T14:06:32.036Z","repository":{"id":57395694,"uuid":"94632796","full_name":"posrix/vue-dynamic-props","owner":"posrix","description":"A Vue mixin to sync props to data in real-time","archived":false,"fork":false,"pushed_at":"2020-05-01T04:35:56.000Z","size":5,"stargazers_count":4,"open_issues_count":2,"forks_count":1,"subscribers_count":1,"default_branch":"master","last_synced_at":"2024-01-03T07:03:14.179Z","etag":null,"topics":["async","javascript","mixin","props","vue"],"latest_commit_sha":null,"homepage":"https://www.npmjs.com/package/vue-dynamic-props","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/posrix.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":"LICENSE.md","code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null}},"created_at":"2017-06-17T15:36:25.000Z","updated_at":"2018-02-28T06:30:20.000Z","dependencies_parsed_at":"2022-09-09T20:01:27.670Z","dependency_job_id":null,"html_url":"https://github.com/posrix/vue-dynamic-props","commit_stats":null,"previous_names":[],"tags_count":0,"template":null,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/posrix%2Fvue-dynamic-props","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/posrix%2Fvue-dynamic-props/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/posrix%2Fvue-dynamic-props/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/posrix%2Fvue-dynamic-props/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/posrix","download_url":"https://codeload.github.com/posrix/vue-dynamic-props/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":241162485,"owners_count":19920410,"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":["async","javascript","mixin","props","vue"],"created_at":"2025-02-28T14:06:31.459Z","updated_at":"2025-02-28T14:06:32.026Z","avatar_url":"https://github.com/posrix.png","language":"JavaScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"# A Vue mixin to sync props to data in real-time\n\nReal-time sync props to data. Useful when props receive async data that would change from time to time, and you also would like to mutate them rather than simply render them but to avoid the Vue warning.\n\n## Install\n\n```bash\nyarn add vue-dynamic-props --dev\n```\n\nor npm\n\n```bash\nnpm install vue-dynamic-props --save-dev\n```\n\n## Usage\n\nUse default data key\n\n```html\n\u003ctemplate\u003e\n  \u003cul class=\"shopping-list\"\u003e\n    \u003cli v-for=\"item in dynamicProps.items\"\u003e\n      {{ item }}\n    \u003c/li\u003e\n  \u003cul/\u003e\n\u003c/template\u003e\n\n\u003cscript\u003e\nimport dynamicProps from 'vue-dynamic-props'\n\nexport default {\n    mixins: [\n      dynamicProps()\n    ],\n    props: {\n      items: Array\n    }\n}\n\u003c/script\u003e\n```\n\nUse a specified data key\n\n```html\n\u003ctemplate\u003e\n  \u003cul class=\"shopping-list\"\u003e\n    \u003cli v-for=\"item in yourKey.items\"\u003e\n      {{ item }}\n    \u003c/li\u003e\n  \u003cul/\u003e\n\u003c/template\u003e\n\n\u003cscript\u003e\nimport dynamicProps from 'vue-dynamic-props'\n\nexport default {\n    mixins: [\n      dynamicProps('yourKey')\n    ],\n    props: {\n      items: Array\n    }\n}\n\u003c/script\u003e\n```\n\n## License\n\nThe MIT License (MIT). Please see [License File](LICENSE.md) for more information.\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fposrix%2Fvue-dynamic-props","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fposrix%2Fvue-dynamic-props","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fposrix%2Fvue-dynamic-props/lists"}