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

Popular posts from this blog

python - How to insert QWidgets in the middle of a Layout? -

python - serve multiple gunicorn django instances under nginx ubuntu -

module - Prestashop displayPaymentReturn hook url -