Vue.js - How to make a numbered input list

Question

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

pawel · Accepted Answer · 2016-10-26 09:50:57Z

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

answered Oct 26, 2016 at 9:50

pawel

37.1k7 gold badges59 silver badges54 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

Khorshed Alam · Accepted Answer · 2016-10-26 09:50:24Z

0

You can bind a key with v-for. See more in vue.js docs https://vuejs.org/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>

answered Oct 26, 2016 at 9:50

Khorshed Alam

2,70624 silver badges32 bronze badges

Collectives™ on Stack Overflow

Vue.js - How to make a numbered input list

2 Answers 2

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related