javascript - Vue.js - How to make a numbered input list -
using vue.js version 2.0
i have code, produces list array. inserts each array item inside 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 vue instance:
var portedittab = new vue({ el: '#portedittab2', data: { namelist: [] } });
as code stand right now, if, example, 'list.namelist' has 3 items in array, put each of 3 items in own input fields.
what want able put label next each input field, , want numbers going 1 many input fields are.
currently, <label>
field 1
. stands, each input field have 1
it's label. <label>
numbers go 1, labels are, example, 1, 2, 3
inside v-for blocks have full access parent scope properties. v-for supports optional second argument index of 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>
Comments
Post a Comment