“You are binding v-model directly to a v-for iteration alias”

今まで遭遇したことのないエラーが発生しました。

"あなたはv-modelをv-forの反復エイリアスに直接バインドしています。エイリアスへの書き込みは関数のローカル変数を変更するようなものなので、これではv-forのソース配列を変更することはできません。オブジェクトの配列を使用することを検討し、代わりにオブジェクトのプロパティにv-modelを使用してください。"

何か間違ったことをしているようには見えないので、少し戸惑っています。 以前に使ったことのある他の v-for ループとの唯一の違いは、このループが少し単純で、オブジェクトではなく文字列の配列を単純にループしているということです。

 <tr v-for="(run, index) in this.settings.runs">

     <td>
         <text-field :name="'run'+index" v-model="run"/>
     </td>

     <td>
        <button @click.prevent="removeRun(index)">X</button>
     </td>

 </tr>

エラーメッセージによると、実際にはもう少し複雑にして、単純な文字列ではなく、オブジェクトを使用する必要があるようですが、これは何かおかしいような気がします。私が何か見逃しているのでしょうか？

解決方法

あなたは v-model を使用しているので、入力フィールドから run の値を更新できることを期待しています (text-field は text input field をベースにしたコンポーネントであると思われます)。

このメッセージは、v-forのエイリアス(run)を直接変更することはできないということを伝えています。その代わり、indexを使って目的の要素を参照することができます。同様に、removeRunでもindexを使用します。

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>

v-forで回した item を v-modelにバインドしてはいけないってこと。