"v-modelを直接反復エイリアスのv-forにバインドしています"

Question

これまで遭遇していなかったこのエラーが発生しました： "v-modelをv-for iterationエイリアスに直接バインドしています。エイリアスへの書き込みは関数のローカル変数を変更するようなものなので、v-forソース配列を変更することができます。オブジェクトの配列を使用し、代わりにオブジェクトプロパティにv-modelを使用することを検討してください。私はちょっと困惑しています。私は間違っているとは思われません。

<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-のための私が前に使ってきたループからの唯一の違いは、単純に文字列の配列ではなく、オブジェクトをループだという点で、この1つは、少し単純であるということです私は物事を実際に少し複雑にする必要があることを示唆し、単純な文字列の代わりにオブジェクトを使用しています。何か不足していますか？

Answer 1

v-modelを使用しているので、runの値を入力フィールドから更新することができます（text-fieldはテキスト入力フィールドに基づくコンポーネントです）。

v-forエイリアス（run）を直接変更できないというメッセージが表示されます。代わりに、indexを使用して、目的の要素を参照することができます。同様ににindexを使用します。 `settings`があなたのviewmodelに定義されているどのよう

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.2.1/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>