Vue 3 - refs

by skirtle

HTML

<script src="https://unpkg.com/[email protected]/dist/vue.js"></script>
<div id="app">
  <button @click="showAtTop = !showAtTop">Toggle</button>
  <div v-if="showAtTop">
    <input ref="inputEl">
  </div>
  <hr>
  <div v-if="!showAtTop">
    <input ref="inputEl">
  </div>
</div>

JavaScript

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

  mounted () {
    this.logRefs()
  },

  updated () {
    this.logRefs()
  },

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

app.$mount('#app')