Vue 3 - refs

by skirtle

HTML

<script src="https://unpkg.com/[email protected]/dist/vue.js"></script>
<div id="app">
  <button @click="toggle = !toggle">Toggle</button>
  <div>
    <input :ref="toggle ? 'ref1' : 'ref2'">
  </div>
  <hr>
  <div>
    <a :ref="toggle ? 'ref2' : 'ref1'">Link</a>
  </div>
</div>

JavaScript

const app = new Vue({
  data () {
    return {
      toggle: false
    }
  },

  mounted () {
    this.logRefs()
  },

  updated () {
    this.logRefs()
  },

  methods: {
    logRefs () {
      console.log('$refs.ref1', type(this.$refs.ref1))
      console.log('$refs.ref2', type(this.$refs.ref2))
      
      function type (v) {
        return ({}).toString.call(v).slice(8, -1)
      }
    }
  }
})

app.$mount('#app')