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>

这是我的Vue实例：

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

按照现在的代码，例如，如果“ list.nameList”的数组中有3个项目，它将把这3个项目中的每一个都放在自己的输入字段中。

我想要做的是在每个输入字段旁边放置一个标签，我只希望它是从1到其输入字段数量不限的数字。

目前，该<label>字段为1。就目前而言，每个输入字段都将带有一个1as的标签。我希望<label>数字增加1，例如，标签是1, 2, 3

Answer 1

在v-for块中，我们可以完全访问父范围属性。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>