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

Ich möchte eine Komponente erstellen, mit Vue.js enthält ein label und ein input. zum Beispiel :

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

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

Danke.

InformationsquelleAutor der Frage PierreB | 2016-01-22

  1. 46

    Jede Komponente hat eine eindeutige id, die kann auch Sie zugegriffen werden wie 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>

    Wenn Sie möchten mehr Kontrolle über die ids können Sie zum Beispiel, erzeugen Sie innerhalb einer übergeordneten Komponente.

    InformationsquelleAutor der Antwort zxzak

  2. 8

    Obwohl zxzak Antwort ist toll; _uid ist nicht eine veröffentlichte api-Eigenschaft. So speichern Sie ein Kopfschmerz in den Fall wird es in der Zukunft ändern, aktualisieren Sie den code mit nur einer änderung mit einer plugin-Lösung wie unten. 

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

    InformationsquelleAutor der Antwort Nihat

  3. 2

    In Vue2, verwenden Sie v-binden.

    Sagen, ich habe ein Objekt für eine Umfrage

      <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>

    InformationsquelleAutor der Antwort 趙曉明

  4. 1

    Zu Nihat ' s point (oben): Evan Sie hat, von denen abgeraten wird Verwendung _uid: "Der vm _uid ist für die interne Verwendung reserviert und es ist wichtig, ihn privat zu halten (und sich nicht darauf verlassen, dass es im Benutzer-code), so dass wir halten, die Flexibilität zu ändern, sein Verhalten für mögliche zukünftige Anwendungsfälle. ... Ich würde vorschlagen, Generierung von UIDs sich [mit einem Modul eine Globale Mixins, etc.]"

    Mit den vorgeschlagenen mixin in diesem GitHub-Ausgabe zu erzeugen, die UID scheint ein besserer Ansatz:

    let uuid = 0;

export default {
  beforeCreate() {
    this.uuid = uuid.toString();
    uuid += 1;
  },
};

    InformationsquelleAutor der Antwort Peter Weil

  5. -2

    Es kann auch erreicht werden, wenn Sie dieses Muster verwenden (Vue 2.0 v-Bindung) , also lassen Sie uns sagen, Sie haben eine Liste von Elementen zu Durchlaufen, und Sie wollen, um einige dom-element uninque id.

    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 es hilft

    InformationsquelleAutor der Antwort pitaside

Schreibe einen Kommentar