vue-uid
Unique ID for Vue.js component.
Install
$ yarn add vue-uid
Usage
Plugin all components have uid.
Components with mixin have uid. Other components don't have uid.
Plugin
Install plugin
import Vue from 'vue';import VueUid from 'vue-uid'; Vue.use(VueUid);
Use with component
<template> <div> <div> <label v-bind:for="`input-${$_uid}`">Name</label> <input v-bind:id="`input-${$_uid}`" /> </div> or <div> <label v-bind:for="id">Name</label> <input v-bind:id="id" /> </div> </div></template> <script>export default { computed: { id() { return `input-${this.$_uid}`; // e.g. input-1 }, },};</script>
Mixin
Use with component
<template> <input v-bind:id="`input-${$_uid}`" /></template> <script>import { vueUidMixin } from 'vue-uid'; export default { mixins: [vueUidMixin], mounted() { const uid = this.$_uid; console.log(uid); // 1 (Number) },};</script>
Options
name
(option)
- type:
String
- default:
$_uid
Change property name.
e.g.
import Vue from 'vue';import VueUid from 'vue-uid'; Vue.use(VueUid, { name: 'uid',});
when
<template> <div> <div> <label v-bind:for="`input-${uid}`">Name</label> <input v-bind:id="`input-${uid}`" /> </div> or <div> <label v-bind:for="id">Name</label> <input v-bind:id="id" /> </div> </div></template> <script>export default { computed: { id() { // change property name return `input-${this.uid}`; // e.g. input-1 }, },};
Public API
reset()
Rest UID count.
import { uid } from 'vue-uid'; uid.reset();
setName(name: String)
Same as name option. This method is for mixin.
import { uid } from 'vue-uid'; uid.setName('uid');
For Nuxt.js
Contribution
If you find a bug or want to contribute to the code or documentation, you can help by submitting an issue or a pull request.