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。就目前而言，每个输入字段都有一个1作为标签。我希望<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>

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>

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

2 个答案: