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 VueMultiRef from 'vue-multi-ref'
  
  Vue.use(VueMultiRef)
  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]

Security

If you discover any security-related issues, please email ctf0-dev@protonmail.com.