"You are binding v-model directly to a v-for iteration alias" "You are binding v-model directly to a v-for iteration alias" vue.js vue.js

"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>