Vue.js - Как сделать нумерованный список ввода

Question

Использование Vue.js версии 2.0

У меня есть этот код, который производит список из массива. Она вставляет каждый элемент массива в поле ввода:

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

Вот мой вю пример:

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

В этом коде стенд прямо сейчас, если, например, «list.nameList» имеет 3 пунктов в своем массиве он поместит каждый из 3 элементов в свои собственные поля ввода.

Что я хочу, чтобы сделать, это поместить метку рядом с каждым полем ввода, и я просто хочу, чтобы это цифры, идущие от 1 до любого количества полей ввода.

В настоящее время поле <label> является 1. В любом случае каждое поле ввода будет иметь 1, как и его ярлык. Я хотел бы это так, чтобы <label> числа идут вверх на 1, так что метки, например, 1, 2, 3

Answer 1

Внутри V-для блоков мы имеем полный доступ к свойствам родительской области. v-for также поддерживает необязательный второй аргумент для индекса текущего элемента.

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

Вы можете свяжите key с v-for. См. Больше в vue.js docs https://vuejs.org/guide/list.html#key

Попробуйте обновить свой код до следующего.

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