vue-reactive-refs Build Status npm package coverage 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 π
npm install vue-reactive-refs
This library exposes two different plugins: ReactiveRefs and
DynamicReactiveRefs and you should only use one of them
Supports all browsers but requires you to manually declare refs in component
options.
import { ReactiveRefs } from 'vue-reactive-refs' import Vue from 'vue' Vue.use(ReactiveRefs)
MyComponent.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>
Supports modern browsers (not IE) that support
Proxy and works out of the box:
import { DynamicReactiveRefs } from 'vue-reactive-refs' import Vue from 'vue' Vue.use(DynamicReactiveRefs)
MyComponent.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>
- Vue.js issue: vuejs/vue#3842