vue-reactive-refs
Version:
Make $refs reactive so they can be used in computed properties and watchers
108 lines (82 loc) • 2.77 kB
Markdown
# 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
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
<template>
<div>
<input ref="input" />
<button v-for="button in actions" ref="buttons">{{ action }}</button>
</div>
</template>
<script>
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)
},
},
}
</script>
```
### `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
<template>
<div>
<input ref="input" />
<button v-for="button in actions" ref="buttons">{{ action }}</button>
</div>
</template>
<script>
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)
},
},
}
</script>
```
## Related
- Vue.js issue: https://github.com/vuejs/vue/issues/3842
## License
[MIT](http://opensource.org/licenses/MIT)