{"id":15764650,"url":"https://github.com/ctf0/vue-multi-ref","last_synced_at":"2025-04-01T13:34:00.484Z","repository":{"id":72021010,"uuid":"112706444","full_name":"ctf0/vue-multi-ref","owner":"ctf0","description":null,"archived":false,"fork":false,"pushed_at":"2023-01-03T23:09:26.000Z","size":11,"stargazers_count":12,"open_issues_count":0,"forks_count":4,"subscribers_count":2,"default_branch":"master","last_synced_at":"2024-10-11T12:18:34.468Z","etag":null,"topics":["directive","javascript","utility","vuejs"],"latest_commit_sha":null,"homepage":"","language":"JavaScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"mit","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/ctf0.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":".github/FUNDING.yml","license":"LICENSE","code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null,"governance":null,"roadmap":null,"authors":null,"dei":null,"publiccode":null,"codemeta":null},"funding":{"github":"ctf0"}},"created_at":"2017-12-01T06:59:41.000Z","updated_at":"2023-01-03T23:09:30.000Z","dependencies_parsed_at":null,"dependency_job_id":"5d690042-514c-47bd-a939-df5bab4982b0","html_url":"https://github.com/ctf0/vue-multi-ref","commit_stats":{"total_commits":16,"total_committers":3,"mean_commits":5.333333333333333,"dds":0.5625,"last_synced_commit":"b3f16f243cbcaa84a8cc9f2b92b3aead024cbfc3"},"previous_names":[],"tags_count":0,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/ctf0%2Fvue-multi-ref","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/ctf0%2Fvue-multi-ref/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/ctf0%2Fvue-multi-ref/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/ctf0%2Fvue-multi-ref/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/ctf0","download_url":"https://codeload.github.com/ctf0/vue-multi-ref/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":246604612,"owners_count":20804100,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2022-07-04T15:15:14.044Z","host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":["directive","javascript","utility","vuejs"],"created_at":"2024-10-04T12:04:20.485Z","updated_at":"2025-04-01T13:34:00.207Z","avatar_url":"https://github.com/ctf0.png","language":"JavaScript","funding_links":["https://github.com/sponsors/ctf0"],"categories":[],"sub_categories":[],"readme":"\u003ch1 align=\"center\"\u003e\n    Vue Multi Ref\n    \u003cbr\u003e\n    \u003ca href=\"https://www.npmjs.com/package/vue-multi-ref\"\u003e\u003cimg src=\"https://img.shields.io/npm/v/vue-multi-ref.svg?style=for-the-badge\" alt=\"npm\" /\u003e\u003c/a\u003e \u003ca href=\"https://www.npmjs.com/package/vue-multi-ref\"\u003e\u003cimg src=\"https://img.shields.io/npm/dt/vue-multi-ref.svg?style=for-the-badge\" alt=\"npm\" /\u003e\u003c/a\u003e\n\u003c/h1\u003e\n\nThis is a directive to help use same `ref` on more than one element.\n\nBig thanx to [@Herteby](https://github.com/herteby) \u0026 [@LinusBorg](https://github.com/LinusBorg). :fire::metal::clap:\n\n[original post](https://forum.vuejs.org/t/how-to-use-the-same-ref-for-more-than-one-item/22481).\n\n## Installation\n\n```bash\nnpm install vue-multi-ref --save\n```\n\n## Usage\n\n- register the directive\n\n    ```js\n    import Vue from 'vue'\n    import VueMultiRef from 'vue-multi-ref'\n\n    Vue.use(VueMultiRef)\n    new Vue({ el: '#app' })\n    ```\n\n    or using Vue as global variable\n\n    ```js\n    window.Vue = require('vue')\n    require('vue-multi-ref')\n\n    new Vue({ el: '#app' })\n    ```\n\n- now add `v-multi-ref:refName` to any number of elements that you want to have the same ref, ex.\n    + `refName` could be\n        - camelCase = `refName`\n        - kebab-case = `ref-name`\n        - snake-case = `ref_name`\n\n    ```html\n    \u003cdiv v-multi-ref:my-ref\u003ea\u003c/div\u003e\n    \u003cli v-multi-ref:my-ref\u003eb\u003c/li\u003e\n    \u003ca v-multi-ref:my-ref\u003ec\u003c/a\u003e\n    ```\n\n- result\n\n    ```js\n    // console.log(this.$refs['my-ref'])\n\n    \u003e my-ref: (3) [div, li, a]\n    ```\n    \n### Security\n\nIf you discover any security-related issues, please email [ctf0-dev@protonmail.com](mailto:ctf0-dev@protonmail.com).\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fctf0%2Fvue-multi-ref","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fctf0%2Fvue-multi-ref","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fctf0%2Fvue-multi-ref/lists"}