Vue Multi Ref

This is a directive to help use same ref on more than one element.

Big thanx to @Herteby & @LinusBorg. 🔥🤘👏

original post.

Installation

npm install vue-multi-ref --save

Usage

• register the directive

  import Vue from 'vue'
  import 'vue-multi-ref'
   
  new Vue({ el: '#app' })

  or using Vue as global variable

  window.Vue = require('vue')
  require('vue-multi-ref')
   
  new Vue({ el: '#app' })

• now add v-multi-ref:refName to any number of elements that you want to have the same ref, ex.

  • refName could be
    • camelCase = refName
    • kebab-case = ref-name
    • snake-case = ref_name

  <div v-multi-ref:my-ref>a</div>
  <li v-multi-ref:my-ref>b</li>
  <a v-multi-ref:my-ref>c</a>

• result

  // console.log(this.$refs['my-ref'])
   
  > my-ref: (3) [div, li, a]