Vue.js - Wie eine nummerierte Eingabeliste

Question

Mit Vue.js Version 2.0

Ich habe diesen Code zu machen, die aus einem Array eine Liste erzeugt. Es fügt jedes Array Element in einem Eingabefeld:

<div class="form-horizontal" id="portEditTab2"> 
<div v-for="list in nameList"> 
    <div> 
     <label class="col-sm-1 control-label" 
       for="nameList">1</label> 

     <div class="col-sm-10"> 
      <input v-bind:value=list.nameList 
        type="text" 
        id="nameList"> 
     </div> 
    </div> 
</div> 
</div> 

Hier ist mein vue Beispiel:

var portEditTab = new Vue({ 
    el: '#portEditTab2', 
    data: { 
     nameList: [] 
    } 
}); 

Da dieser Code Stand jetzt, wenn zum Beispiel 'list.nameList' 3 Artikel hat In seinem Array wird jedes der 3 Elemente in eigene Eingabefelder gesetzt.

Was ich tun möchte, ist eine Beschriftung neben jedem Eingabefeld, und ich will es nur Zahlen von 1 bis wie viele Eingabefelder sind sie.

Derzeit ist das Feld <label>1. So wie es steht, wird jedes Eingabefeld eine 1 wie es Label hat. Ich möchte es so, dass die <label> Zahlen von 1 nach oben, so dass die Etiketten sind zum Beispiel 1, 2, 3

Answer 1

Innen v-für Blöcke haben wir vollen Zugang zum übergeordneten Bereich Eigenschaften. v-for unterstützt auch ein optionales zweites Argument für den Index des aktuellen Elements.

http://vuejs.org/guide/list.html#v-for

<div v-for="(list, index) in nameList"> 
    <div> 
     <label class="col-sm-1 control-label" 
       for="nameList">{{ index }}</label> 

     <div class="col-sm-10"> 
      <input v-bind:value=list.nameList 
        type="text" 
        id="nameList"> 
     </div> 
    </div> 
</div> 

Answer 2

Sie eine key mit v-for binden kann. Sehen Sie mehr in vue.js docs https://vuejs.org/guide/list.html#key

Versuchen Sie nach der Aktualisierung Ihres Codes zu folgen.

<div class="form-horizontal" id="portEditTab2"> 
<div v-for="list in nameList" :key="list.id"> 
    <div> 
     <label class="col-sm-1 control-label" 
       for="nameList">{{list.id}}</label> 

     <div class="col-sm-10"> 
      <input v-bind:value=list.nameList 
        type="text" 
        id="nameList"> 
     </div> 
    </div> 
</div> 
</div>