Vue.js - 如何制作带编号的输入列表答案

【问题标题】：Vue.js - How to make a numbered input listVue.js - 如何制作带编号的输入列表
【发布时间】：2016-10-26 09:43:00
【问题描述】：

使用 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。就目前而言，每个输入字段都有一个1 作为它的标签。我希望 <label> 数字增加 1，以便标签例如为 1, 2, 3

【问题讨论】：

标签： javascript vue.js

【解决方案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>

【讨论】：

【解决方案2】：

您可以将key 与v-for 绑定。在 vue.js 文档中查看更多信息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>

【讨论】：