{"id":16439159,"url":"https://github.com/posva/vue-reactive-refs","last_synced_at":"2025-04-07T13:06:46.469Z","repository":{"id":35040960,"uuid":"198797446","full_name":"posva/vue-reactive-refs","owner":"posva","description":"Make $refs reactive so they can be used in computed properties and watchers","archived":false,"fork":false,"pushed_at":"2023-03-04T04:23:55.000Z","size":741,"stargazers_count":159,"open_issues_count":12,"forks_count":3,"subscribers_count":3,"default_branch":"master","last_synced_at":"2025-03-31T11:04:15.791Z","etag":null,"topics":["computed","reactive","refs","vue","watchers"],"latest_commit_sha":null,"homepage":null,"language":"TypeScript","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,"governance":null,"roadmap":null,"authors":null,"dei":null,"publiccode":null,"codemeta":null},"funding":{"github":"posva"}},"created_at":"2019-07-25T09:09:51.000Z","updated_at":"2024-12-29T20:00:34.000Z","dependencies_parsed_at":"2025-02-07T12:10:39.702Z","dependency_job_id":"db065589-9320-4974-9e30-67bd46e49f55","html_url":"https://github.com/posva/vue-reactive-refs","commit_stats":null,"previous_names":[],"tags_count":2,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/posva%2Fvue-reactive-refs","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/posva%2Fvue-reactive-refs/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/posva%2Fvue-reactive-refs/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/posva%2Fvue-reactive-refs/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/posva","download_url":"https://codeload.github.com/posva/vue-reactive-refs/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":247657281,"owners_count":20974345,"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":["computed","reactive","refs","vue","watchers"],"created_at":"2024-10-11T09:08:15.645Z","updated_at":"2025-04-07T13:06:46.450Z","avatar_url":"https://github.com/posva.png","language":"TypeScript","funding_links":["https://github.com/sponsors/posva"],"categories":["TypeScript"],"sub_categories":[],"readme":"# vue-reactive-refs [![Build Status](https://badgen.net/circleci/github/posva/vue-reactive-refs)](https://circleci.com/gh/posva/vue-reactive-refs) [![npm package](https://badgen.net/npm/v/vue-reactive-refs)](https://www.npmjs.com/package/vue-reactive-refs) [![coverage](https://badgen.net/codecov/c/github/posva/vue-reactive-refs)](https://codecov.io/github/posva/vue-reactive-refs) [![thanks](https://badgen.net/badge/thanks/♥/pink)](https://github.com/posva/thanks)\n\n\u003e Make \\$refs reactive so they can be used in computed properties and watchers\n\n**Vue 2 only** as you don't need this in Vue 3\n\nExtremely Light \u003c 0.2kb 🗜\n\n## Installation\n\n```sh\nnpm install vue-reactive-refs\n```\n\n## Usage\n\nThis library exposes two different plugins: `ReactiveRefs` and\n`DynamicReactiveRefs` and you should **only use one of them**\n\n### `ReactiveRefs`\n\nSupports all browsers but requires you to manually declare `refs` in component\noptions.\n\n```js\nimport { ReactiveRefs } from 'vue-reactive-refs'\nimport Vue from 'vue'\n\nVue.use(ReactiveRefs)\n```\n\nMyComponent.vue\n\n```vue\n\u003ctemplate\u003e\n  \u003cdiv\u003e\n    \u003cinput ref=\"input\" /\u003e\n    \u003cbutton v-for=\"button in actions\" ref=\"buttons\"\u003e{{ action }}\u003c/button\u003e\n  \u003c/div\u003e\n\u003c/template\u003e\n\n\u003cscript\u003e\nexport default {\n  // this is necessary\n  refs: ['input', 'buttons'],\n\n  computed: {\n    // NOTE: this is definitely not what you should use this lib for, but it's\n    // the easiest example\n    inputValue() {\n      return this.$refs.input \u0026\u0026 this.$refs.input.value\n    },\n    // Same for this example. It's ALWAYS better to mapping your data (the source of truth)\n    // and avoid at all cost mapping information to the DOM\n    buttonsText() {\n      return this.$refs.buttons \u0026\u0026 this.$refs.buttons.map(b =\u003e b.innerText)\n    },\n  },\n}\n\u003c/script\u003e\n```\n\n### `DynamicReactiveRefs`\n\nSupports modern browsers (not IE) [that support\n`Proxy`](https://caniuse.com/#search=proxy) and works out of the box:\n\n```js\nimport { DynamicReactiveRefs } from 'vue-reactive-refs'\nimport Vue from 'vue'\n\nVue.use(DynamicReactiveRefs)\n```\n\nMyComponent.vue\n\n```vue\n\u003ctemplate\u003e\n  \u003cdiv\u003e\n    \u003cinput ref=\"input\" /\u003e\n    \u003cbutton v-for=\"button in actions\" ref=\"buttons\"\u003e{{ action }}\u003c/button\u003e\n  \u003c/div\u003e\n\u003c/template\u003e\n\n\u003cscript\u003e\nexport default {\n  computed: {\n    // NOTE: this is definitely not what you should use this lib for, but it's\n    // the easiest example\n    inputValue() {\n      return this.$refs.input \u0026\u0026 this.$refs.input.value\n    },\n    // Same for this example. It's ALWAYS better to mapping your data (the source of truth)\n    // and avoid at all cost mapping information to the DOM\n    buttonsText() {\n      return this.$refs.buttons \u0026\u0026 this.$refs.buttons.map(b =\u003e b.innerText)\n    },\n  },\n}\n\u003c/script\u003e\n```\n\n## Related\n\n- Vue.js issue: https://github.com/vuejs/vue/issues/3842\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-reactive-refs","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fposva%2Fvue-reactive-refs","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fposva%2Fvue-reactive-refs/lists"}