"V-modelini doğrudan v-for yineleme diğer adıyla bağlıyorsunuz"

Question

Sadece daha önce karşılaşmadığım bu hatayı çalıştırın: "V-modelini doğrudan v için yinelenen diğer ad takma adıyla bağlamanız gerekir. v-for source dizisini değiştirebilir, çünkü takma adıma bir işlev yerel değişkenini değiştirmek gibidir. Bir dizi nesne kullanmayı düşünün ve bunun yerine bir object özelliği üzerinde v-modelini kullanın. " Ben yanlış bir şey yapmak gibi görünmüyor gibi biraz şaşkın.

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

hata mesajı görünüyor:-için v döngüler Daha önce kullandığım diğerinden tek farkı sadece ziyade nesnelerin yerine, dize dizisi döngü oluyor ki bu bir, biraz daha basit olmasıdır Bazı şeyleri aslında biraz daha karmaşık hale getirmem gerektiğini ve bir şekilde benim için doğru olmayan basit diziler yerine nesneleri kullanmam gerektiğini önermek. Bir şey mi eksik?

Answer 1

v-model'u kullandığınızdan, giriş alanından run değerini güncelleştirmeyi beklersiniz (text-field, metin giriş alanına dayalı bir bileşendir).

İleti, bir v-for diğer adını (run olduğu) doğrudan değiştiremeyeceğinizi bildirmektedir. Bunun yerine, istenen öğeye başvurmak için index'u kullanabilirsiniz. Benzer şekilde, removeRun'da index kullanırsınız. Nasıl 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>