Ecosyste.ms: Awesome
An open API service indexing awesome lists of open source software.
https://github.com/posva/vue-reactive-refs
Make $refs reactive so they can be used in computed properties and watchers
https://github.com/posva/vue-reactive-refs
computed reactive refs vue watchers
Last synced: 19 days ago
JSON representation
Make $refs reactive so they can be used in computed properties and watchers
- Host: GitHub
- URL: https://github.com/posva/vue-reactive-refs
- Owner: posva
- License: mit
- Created: 2019-07-25T09:09:51.000Z (over 5 years ago)
- Default Branch: master
- Last Pushed: 2023-03-04T04:23:55.000Z (over 1 year ago)
- Last Synced: 2024-10-17T00:14:17.130Z (29 days ago)
- Topics: computed, reactive, refs, vue, watchers
- Language: TypeScript
- Size: 724 KB
- Stars: 160
- Watchers: 4
- Forks: 3
- Open Issues: 12
-
Metadata Files:
- Readme: README.md
- Contributing: .github/CONTRIBUTING.md
- Funding: .github/funding.yml
- License: LICENSE
- Code of conduct: .github/CODE_OF_CONDUCT.md
Awesome Lists containing this project
README
# vue-reactive-refs [](https://circleci.com/gh/posva/vue-reactive-refs) [](https://www.npmjs.com/package/vue-reactive-refs) [](https://codecov.io/github/posva/vue-reactive-refs) [](https://github.com/posva/thanks)
> Make \$refs reactive so they can be used in computed properties and watchers
**Vue 2 only** as you don't need this in Vue 3
Extremely Light < 0.2kb 🗜
## Installation
```sh
npm install vue-reactive-refs
```
## Usage
This library exposes two different plugins: `ReactiveRefs` and
`DynamicReactiveRefs` and you should **only use one of them**
### `ReactiveRefs`
Supports all browsers but requires you to manually declare `refs` in component
options.
```js
import { ReactiveRefs } from 'vue-reactive-refs'
import Vue from 'vue'
Vue.use(ReactiveRefs)
```
MyComponent.vue
```vue
{{ action }}
export default {
// this is necessary
refs: ['input', 'buttons'],
computed: {
// NOTE: this is definitely not what you should use this lib for, but it's
// the easiest example
inputValue() {
return this.$refs.input && this.$refs.input.value
},
// Same for this example. It's ALWAYS better to mapping your data (the source of truth)
// and avoid at all cost mapping information to the DOM
buttonsText() {
return this.$refs.buttons && this.$refs.buttons.map(b => b.innerText)
},
},
}
```
### `DynamicReactiveRefs`
Supports modern browsers (not IE) [that support
`Proxy`](https://caniuse.com/#search=proxy) and works out of the box:
```js
import { DynamicReactiveRefs } from 'vue-reactive-refs'
import Vue from 'vue'
Vue.use(DynamicReactiveRefs)
```
MyComponent.vue
```vue
{{ action }}
export default {
computed: {
// NOTE: this is definitely not what you should use this lib for, but it's
// the easiest example
inputValue() {
return this.$refs.input && this.$refs.input.value
},
// Same for this example. It's ALWAYS better to mapping your data (the source of truth)
// and avoid at all cost mapping information to the DOM
buttonsText() {
return this.$refs.buttons && this.$refs.buttons.map(b => b.innerText)
},
},
}
```
## Related
- Vue.js issue: https://github.com/vuejs/vue/issues/3842
## License
[MIT](http://opensource.org/licenses/MIT)