posva / vue-reactive-refs Goto Github PK

<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>