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

Vue.js - How to make a numbered input list

本文关键字：编号 一个 输入 列表 js- 何制作 Vue      更新时间：2023-09-26

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

在v-for块中，我们可以完全访问父作用域属性v-for还支持当前项目的索引。

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

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

您可以将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>
相关文章：