posva / vue-reactive-refs Goto Github PK

View Code? Open in Web Editor NEW

160.0 4.0 3.0 741 KB

Make $refs reactive so they can be used in computed properties and watchers

License: MIT License

TypeScript 71.68% JavaScript 28.32%

vue reactive refs computed watchers

vue-reactive-refs's People

Stargazers

Watchers

Forkers

cuulee assoft vue-mk

vue-reactive-refs's Issues

Vue 3

Using @vue/compat, the beforeCreate hook in proxy.ts throws an exception:

this.$refs = new Proxy(...)
TypeError: 'set' on proxy: trap returned falsish for property

My Vue 3 fix is to change the hook to this:

beforeCreate() {
    this.$.refs = reactive({});
}

Note the period between the '$' and the 'refs'.

I swore I read somewhere that $refs was going to be reactive in Vue 3, but it seems not to be. Maybe I just imagined it...

bug: The computed property can't recompute when it was refer in template.

<template>
  <div>
    <input ref="input" />
    <button v-for="button in actions" ref="buttons">{{ action }}</button>
    <div>{{inputValue}}</div>
  </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>