Vue.js: Wie wird eine eindeutige ID für jede Komponenteninstanz festgelegt?

Question

Ich möchte eine Komponente mit Vue.js mit einem Label und einem Eingang erstellen. zum Beispiel:

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

Wie kann ich eine eindeutige ID für jede Komponenten-Instanz?

Vielen Dank.

Answer 1

Jede Komponente hat eine eindeutige ID, auf die als this._uid zugegriffen werden kann.

Wenn Sie mehr Kontrolle über die IDs möchten, können Sie sie beispielsweise in einer übergeordneten Komponente generieren.

Answer 2

Es kann auch mit diesem Muster (Vue 2.0 v-bind) erreicht werden, also haben Sie eine Liste von Elementen zu iterieren und Sie möchten einige Dom-Element uninque IDs geben.

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> 

Hoffe, dass es

Answer 3

In Vue2 mit v-bind hilft.

sagen, dass ich für eine Umfrage ein Objekt haben

<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

Obwohl zxzak Antwort ist groß; _uid ist keine veröffentlichte API-Eigenschaft. Um Kopfschmerzen zu vermeiden, falls es sich in Zukunft ändert, können Sie Ihren Code mit nur einer Änderung mit einer Plugin-Lösung wie unten beschrieben aktualisieren.

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