How to Set a Unique ID for Each Component Instance in VueJS ?
Last Updated :
29 Jul, 2024
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:
Approach 1: Using Vue's _uid
In this approach, we are using the _uid property which is used to automatically assign to each component instance. This is like a unique identifier. By accessing the value of this._id in the mounted hook of the component, we can set the unique ID for each instance.
Syntax:
mounted() {
this.uniqueId = this._uid;
}Example: Below is the implementation of the above-discussed approach.
HTML
<!DOCTYPE html>
<html lang="en">
<head>
<title>Example 1</title>
<script src=
"https://cdn.jsdelivr.net/npm/vue@2"></script>
<style>
#app {
text-align: center;
margin-top: 20px;
}
h1 {
color: green;
}
</style>
</head>
<body>
<div id="app">
<h1>GeeksforGeeks</h1>
<h3>Approach 1: Using Vue's _uid</h3>
<button @click="compAdd">Add Component</button>
<div v-for="component in components"
:key="component.id">
<my-comp></my-comp>
</div>
</div>
<script type="text/x-template" id="my-comp-template">
<div>
Component with ID: {{ uniqueId }}
</div>
</script>
<script>
Vue.component('my-comp', {
template: '#my-comp-template',
data() {
return {
uniqueId: null,
};
},
mounted() {
this.uniqueId = this._uid;
},
});
new Vue({
el: '#app',
data: {
components: [],
},
methods: {
compAdd() {
this.components.push({});
}
}
});
</script>
</body>
</html>
Output:
Approach 2: Using Global MixIn
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;">
GeeksforGeeks
</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:
Similar Reads
How to Update Parent Data from Child Component in VueJS? In Vue.js, communication between components is essential for building dynamic applications. One common scenario is updating the parent component's data from a child component. we will cover several ways to achieve this, including custom events, and v-model. Updating parent data from a child componen
3 min read
How to Force a Vue Component to Re-Render? In VueJS, you may sometimes need to force a component to re-render, especially when the component doesn't update automatically due to Vue's reactivity system not detecting changes. One way to achieve this is by using a unique key attribute. Changing the key will force Vue to destroy and recreate the
3 min read
How to create instance in Vue.js ? A Vue.js Instance refers to a Vue constructor's instance in the Vue application. It acts as a container that holds your application's data and methods. Vue.js implements the Component-Based Architecture that enables the generation of these instances, in order to represent and manage individual compo
2 min read
How to Pass Value from One Child Component to Another in VueJS ? Vue.js is a JavaScript framework used in building powerful and beautiful user interfaces. The key feature of Vue.js is its component-based architecture that allows the developers to create reusable and modular components. In this article, we will learn how to pass value from one child component to a
3 min read
How to Create an Unique ID in ReactJS ? Generating an unique ID in React js is helpful in component identifiers in React applications. It can be used to separate and identify database records and as a key in many applications. How to Create Unique ID in ReactWe can create unique id in React With the help of UUID package, that generates un
3 min read
How to listen for Prop Changes in VueJS ? In Vue.js, props provide the mechanism for parent components to share data with their child components. While props themselves are reactive, meaning changes in the parent component automatically trigger a re-render of the child component, sometimes we might need to react to specific prop changes wit
3 min read