CODEWITHSUNDEEP
javascriptvue.js
gb_spectrum
gb_spectrum

Reputation: 2301

Vue.js - How to make a numbered input list

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

Upvotes: 5

Views: 5708

Answers (2)

pawel
pawel

Reputation: 36975

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>

Upvotes: 6

Khorshed Alam
Khorshed Alam

Reputation: 2708

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>

Upvotes: 0

Related Questions