vue-reactive-refs 
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
npm install vue-reactive-refsUsage
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.
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>DynamicReactiveRefs
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>Related
- Vue.js issue: vuejs/vue#3842