"Sie binden v-model direkt an einen v-for-Iterationsalias"

Question

Führen Sie einfach diesen Fehler aus, den ich vorher noch nicht festgestellt hatte: "Sie binden v-model direkt an einen v-for-Iterationsalias in der Lage sein, das v-for-source-Array zu modifizieren, da das Schreiben in den Alias ​​vergleichbar ist mit dem Ändern einer lokalen Funktion. Betrachten Sie ein Array von Objekten und verwenden Sie stattdessen v-model für eine Objekteigenschaft. " Ich bin ein wenig verwirrt, da ich anscheinend keinen Fehler mache. Der einzige Unterschied zu anderen v-for-Schleifen ich vorher benutzt habe, ist, dass dies ein wenig einfacher ist, dass es einfach ist durch eine Reihe von Strings Looping, anstatt Objekten:

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

Die Fehlermeldung erscheinen würde Ich schlage vor, dass ich die Dinge etwas komplizierter machen muss und Objekte anstelle einfacher Strings verwenden muss, was mir irgendwie nicht richtig erscheint. Fehle ich etwas?

Answer 1

Da Sie v-model verwenden, erwarten Sie in der Lage zu sein, den run Wert aus dem Eingabefeld zu aktualisieren (text-field ist eine Komponente basierend auf Text Eingabefeld, nehme ich an).

Die Nachricht teilt Ihnen mit, dass Sie einen v-for Alias ​​(der run ist) nicht direkt ändern können. Stattdessen können Sie index verwenden, um auf das gewünschte Element zu verweisen. Sie würden auch index in removeRun verwenden.

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>