https://github.com/ctf0/vue-multi-ref

https://github.com/ctf0/vue-multi-ref

directive javascript utility vuejs

Last synced: 4 days ago
JSON representation

• Host: GitHub
• URL: https://github.com/ctf0/vue-multi-ref
• Owner: ctf0
• License: mit
• Created: 2017-12-01T06:59:41.000Z (almost 7 years ago)
• Default Branch: master
• Last Pushed: 2023-01-03T23:09:26.000Z (almost 2 years ago)
• Last Synced: 2024-10-11T12:18:34.468Z (26 days ago)
• Topics: directive, javascript, utility, vuejs
• Language: JavaScript
• Homepage:
• Size: 10.7 KB
• Stars: 12
• Watchers: 2
• Forks: 4
• Open Issues: 0
• Metadata Files:
  • Readme: README.md
  • Funding: .github/FUNDING.yml
  • License: LICENSE

Awesome Lists containing this project

README

        


    Vue Multi Ref

    


     



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

Big thanx to [@Herteby](https://github.com/herteby) & [@LinusBorg](https://github.com/LinusBorg). :fire::metal::clap:

[original post](https://forum.vuejs.org/t/how-to-use-the-same-ref-for-more-than-one-item/22481).

## Installation

```bash

npm install vue-multi-ref --save

```

## Usage

- register the directive

    ```js

    import Vue from 'vue'

    import VueMultiRef from 'vue-multi-ref'

    Vue.use(VueMultiRef)

    new Vue({ el: '#app' })

    ```

    or using Vue as global variable

    ```js

    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`

    ```html

    
a

    
b

    c

    ```


- result

    ```js

    // console.log(this.$refs['my-ref'])

    > my-ref: (3) [div, li, a]

    ```

    

### Security

If you discover any security-related issues, please email [[email protected]](mailto:[email protected]).