Search code examples
vue.jsunique-id

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

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?

Solution

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

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

<script>
export default {
  data () {
    return {
      id: null
    }
  }, 
  mounted () {
    this.id = this._uid
  }
}
</script>

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