vue.js - Vuejs: v-model array in multiple input -

i'm amazed vuejs brings table, i'm hitting wall @ following. have input text field v-model attached, , every time hits "add" button, input text added dom same v-model attached. thought i'd array of v-model values, gets value of first v-model input:

<label class="col-sm-2" for="reference">referenties</label> <div class="col-sm-6">     <input v-model="find.references" class="form-control" type="text"> </div> <div class="col-sm-2"> <button @click="addreference" class="form-control"><span class="glyphicon glyphicon-plus"></span>add</button>                         

the html append dom triggered addreference method:

addreference : function (e) {             e.preventdefault();              console.log(this.find.references);              div = '<div class="col-sm-6 col-md-offset-2 reference-row"><input v-model="find.references" class="form-control" type="text"></div>';              $('#references').append(div);         } 

is vuejs can't do? there different approach of gathering values dynamic dom elements vuejs?

you're thinking dom, it's hard hell habit break. vue recommends approach data first.

it's kind of hard tell in exact situation i'd use v-for , make array of finds push need more.

here's how i'd set instance:

new vue({   el: '#app',   data: {     finds: []   },   methods: {     addfind: function () {       this.finds.push({ value: '' });     }   } }); 

and here's how i'd set template:

<div id="app">   <h1>finds</h1>   <div v-for="find in finds">     <input v-model="find.value">   </div>   <button @click="addfind">     new find   </button> </div> 

here's demo of above: https://jsfiddle.net/a5t24gm3/1/