Vue.js: How to define a unique ID for each component instance?

advertisements

I want to create a component with Vue.js containing a label and an input. for example :

<label for="inputId">Label text</label>
<input id="inputId" type="text" />

How can I set a unique ID for each component instance?

Thank you.


Each component has a unique id which can be accessed as this._uid.

<body>
  <label :for="id">Label text for {{id}}</label>
  <input :id="id" type="text" />
</body>

new Vue({
    el: 'body',
    data: {
      id: -1,
    },
    mounted : function(){
      this.id = this._uid
    }
})

If you want more control over the ids you can for example, generate them inside a parent component.