Seperti yang ditunjukkan di bawah, saya menggunakan v-for untuk menjadikan itemList ini dalam html, dan mengawal sama ada untuk memaparkan (v-show) html yang sepadan dengan item ini melalui aktif setiap item.
Namun, jika anda memilihItem melalui kaedah acara seperti ini dan menukar itemList, dom tidak dikemas kini? ? ?
var vue = new Vue({
el: '#app',
data: {
itemList:{
'1':{'text':'abc', 'active':false},
'2':{'text':'abc', 'active':true}
},
},
methods: {
selectItem: function (index) {
vue.itemList[index].active = true;
},
},
});
vue.itemList[index].aktif = benar; vue ditukar kepada ini
Adakah terdapat nilai untuk console.log(index) dalam selectItem Anda harus menggunakan ini untuk mendapatkan objek vue ini
Kaedah ubah suai data tidak betul, jadi tiada ralat dilaporkan?
Mengikut format data yang anda berikan, saya mencubanya dan ia berkesan Kodnya adalah seperti berikut
`<p id="app">
<li v-for="(item,index) dalam itemList" v- on:click="selectItem(index)" v-if="item.active">
</li>
</p>
<skrip>
</skrip>`
Di dalam vue, ia bukan melalui vue Walaupun anda menggunakan pembolehubah untuk menyimpan contoh vue melalui ini
Bagaimanakah anda menulisnya dalam html anda? Walaupun kod js anda tidak cukup elegan, sebagai contoh, adalah lebih sesuai untuk menggunakan tatasusunan dan bukannya objek di sini, tetapi saya fikir kegagalan dom anda untuk membuat bukan masalah di sini. Ia harus terikat dengan kawalan bentuk seperti masalah aliran sehala bagi data terpilih.
Mod nilai kunci tidak boleh dipantau oleh vue, vue menyediakan kaedah $set. . Pemadaman juga memerlukan
pilihItem: fungsi (indeks) {
},
Tukar Vue kepada ini dan cuba
this.itemList.splice(index, 1, Object.assign({}, this.itemList[index], { active: true }))