How to useGlobal MixIn in Vue
In this approach, we are using the global mixin to generate unqiueIDs with custom prefixes and length. We have applied the mixin globally to all the components and each time when the Add Component button is clicked, a new instance of the component is created with the unique ID generated by the idFn method.
Syntax:
// global mixin
const myGlobalMixin = {
data() {
return {
// properties
};
},
methods: {
// methods
},
};
// use the global mixin
Vue.mixin(myGlobalMixin);
Example: Below is the implementation of the above-discussed approach.
HTML
<!DOCTYPE html><html lang="en"><head> <title>Example 2</title> <script src="https://cdn.jsdelivr.net/npm/vue@2"> </script></head><body> <div id="app"> <h1 style="color: green;"> w3wiki </h1> <h3 style="color: black;"> Approach 2: Using Global MixIn </h3> <div> <label for="pre">ID Prefix:</label> <input type="text" id="pre" v-model="pre" placeholder="Enter a prefix"> </div> <div> <label for="length">Length:</label> <input type="number" id="length" v-model.number="idLen" min="1" max="10"> </div> <button @click="compAdd">Add Component</button> <div v-for="(component, index) in components" :key="index"> <unique-id-component :instance-id="component.instanceId"> </unique-id-component> </div> <script> Vue.mixin({ data() { return { componentCount: 0, }; }, methods: { idFn() { const randomPart = Math.random() .toString(36).substr(2, this.idLen); return `${this.pre}_${randomPart} _${this.componentCount++}`; }, }, }); Vue.component('unique-id-component', { props: ['instanceId'], template: '<div>{{ instanceId }}</div>', }); new Vue({ el: '#app', data: { pre: 'demo', idLen: 4, components: [], }, methods: { compAdd() { this.components.push({ instanceId: this.idFn() }); }, }, }); </script> </div></body></html> |
Output:
How to Set a Unique ID for Each Component Instance in VueJS ?
In Vue.js we can assign the unique ID to each of the component instances for properly managing the components in the application. In this article, we will see the different approaches to setting the unique ID for each component instance in VueJS.
These are the following approaches:
Table of Content
- Using Vue’s _uid
- Using Global MixIn