"You are binding v-model directly to a v-for iteration alias"
Since you're using v-model
, you expect to be able to update the run
value from the input field (text-field
is a component based on text input field, I assume).
The message is telling you that you can't directly modify a v-for
alias (which run
is). Instead you can use index
to refer to the desired element. You would similarly use index
in removeRun
.
new Vue({ el: '#app', data: { settings: { runs: [1, 2, 3] } }, methods: { removeRun: function(i) { console.log("Remove", i); this.settings.runs.splice(i,1); } }});
<script src="//cdnjs.cloudflare.com/ajax/libs/vue/2.5.18/vue.js"></script><table id="app"> <tr v-for="(run, index) in settings.runs"> <td> <input type="text" :name="'run'+index" v-model="settings.runs[index]" /> </td> <td> <button @click.prevent="removeRun(index)">X</button> </td> <td>{{run}}</td> </tr></table>