"Wiążesz v-model bezpośrednio z aliasem v-dla iteracji"

Question

Po prostu napotkasz ten błąd, którego wcześniej nie napotkałem: "Wiążesz v-model bezpośrednio z aliasem v-for iteration. Możliwa jest modyfikacja tablicy źródłowej v-for, ponieważ zapisywanie do aliasu przypomina modyfikację zmiennej lokalnej funkcji. Rozważ użycie tablicy obiektów i użyj v-modelu do właściwości obiektu. " Jestem trochę zdziwiony, ponieważ wydaje mi się, że nie robię niczego źle. Jedyna różnica z innych v-pętle Użyłem przed jest to, że jest trochę prostsza, że ​​to po prostu zapętlenie za pośrednictwem tablicy ciągów, zamiast obiektów:

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

Komunikat o błędzie wydaje zasugerować, że muszę rzeczy nieco bardziej skomplikować i używać obiektów zamiast prostych łańcuchów, które jakoś nie wydają mi się właściwe. Czy czegoś brakuje?

Answer 1

Ponieważ używasz v-model, możesz oczekiwać aktualizacji wartości run z pola wejściowego (text-field jest komponentem opartym na polu wprowadzania tekstu, zakładam).

Komunikat mówi, że nie można bezpośrednio zmodyfikować aliasu v-for (który jest run). Zamiast tego możesz użyć index, aby odnieść się do pożądanego elementu. Podobnie używałbyś index w 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.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>