javascript - Vue.js - How to make a numbered input list - Stack Overflow

admin管理员组

文章数量:1324431

Using Vue.js Version 2.0

I have this code, which produces a list from an array. It inserts each array item inside an input field:

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

Here is my vue instance:

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

As this code stand right now, if, for example, 'list.nameList' has 3 items in its array, it will put each of the 3 items in their own input fields.

What I want to be able to do is put a label next to each input field, and I just want it to be numbers going from 1 to however many input fields their are.

Currently, the <label> field is 1. As it stands, each input field will have a 1 as it's label. I would like it so that the <label> numbers go up by 1, so that the labels are, for example, 1, 2, 3

Using Vue.js Version 2.0

I have this code, which produces a list from an array. It inserts each array item inside an input field:

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

Here is my vue instance:

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

As this code stand right now, if, for example, 'list.nameList' has 3 items in its array, it will put each of the 3 items in their own input fields.

What I want to be able to do is put a label next to each input field, and I just want it to be numbers going from 1 to however many input fields their are.

Currently, the <label> field is 1. As it stands, each input field will have a 1 as it's label. I would like it so that the <label> numbers go up by 1, so that the labels are, for example, 1, 2, 3

• javascript
• vue.js

Share Follow edited Oct 26, 2016 at 9:48 gb_spectrum asked Oct 26, 2016 at 9:43 gb_spectrumgb_spectrum 2,30188 gold badges3636 silver badges5757 bronze badges 0

Add a ment  | 

2 Answers 2

Sorted by: Reset to default 6

Inside v-for blocks we have full access to parent scope properties. v-for also supports an optional second argument for the index of the current item.

http://vuejs/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>

You can bind a key with v-for. See more in vue.js docs https://vuejs/guide/list.html#key

Try after updating your code to following.

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

本文标签： javascriptVuejsHow to make a numbered input listStack Overflow