Vue.js: Как установить уникальный идентификатор для каждого экземпляра компонента?

Question

Я хочу создать компонент с Vue.js, содержащий метку и ввод. например:

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

Как установить уникальный идентификатор для каждого экземпляра компонента?

спасибо.

Answer 1

Каждый компонент имеет уникальный идентификатор, к которому можно обратиться как 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> 

Если вы хотите больше контролировать идентификаторы, вы можете, например, сгенерировать их внутри родительского компонента.

Answer 2

Это также может быть достигнуто с использованием этого шаблона (Vue 2.0 v-bind), поэтому скажем, что у вас есть список элементов для перебора и вы хотите указать некоторый элемент id элемента uninque.

new Vue({ 

    el:body, 
    data: { 
    myElementIds : [1,2,3,4,5,6,8] 
    } 
}) 

Html

<div v-for="id in myElementIds"> 
    <label v-bind:for="id">Label text for {{id}}</label> 
    <input v-bind:id="id" type="text" /> 
<div> 

Надеется, что это помогает

Answer 3

В Vue2, использование V-связывание.

Скажем, у меня есть объект для опроса

<div class="options" v-for="option in poll.body.options"> 
    <div class="poll-item"> 
     <label v-bind:for="option._id" v-bind:style="{color: option.color}">{{option.text}}</label> 
     <input type="radio" v-model="picked" v-bind:value="option._id" v-bind:id="option._id"> 
    </div> 
    </div> 

Answer 4

Хотя ответ zxzak является большим; _uid не является опубликованным свойством api. Чтобы сохранить головную боль, если он изменится в будущем, вы можете обновить свой код только одним изменением с помощью решения плагина, как показано ниже.

Vue.use({ 
    install: function(Vue, options) { 
     Object.defineProperty(Vue.prototype, "uniqId", { 
      get: function uniqId() { 
       return this._uid; 
      } 
     }); 
    } 
});