Rumah > Soal Jawab > teks badan
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;
},
},
});
仅有的幸福2017-06-12 09:31:44
// 你的数据itemList结构改改
var vue = new Vue({
el: '#app',
data: {
itemList:[
{'text':'abc', 'active':false},
{'text':'abc', 'active':true}
],
},
methods: {
selectItem: function (index) {
this.itemList[index].active = true;
},
},
});
滿天的星座2017-06-12 09:31:44
Adakah terdapat nilai untuk console.log(index) dalam selectItem Anda harus menggunakan ini untuk mendapatkan objek vue ini
曾经蜡笔没有小新2017-06-12 09:31:44
Kaedah ubah suai data tidak betul, jadi tiada ralat dilaporkan?
var vue = new Vue({
el: '#app',
data: {
itemList:[
{'text':'abc', 'active':false},
{'text':'abc', 'active':true}
]
},
methods: {
selectItem: function (index) {
this.itemList[index].active = true;
}
},
});
某草草2017-06-12 09:31:44
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">
{{item.text}}
</li>
</p>
<skrip>
var vue = new Vue({
el: '#app',
data: {
itemList:{
'1':{'text':'abc1', 'active':true},
'2':{'text':'abc2', 'active':true}
},
},
methods: {
selectItem: function (index) {
console.log(vue.itemList[index].active);
vue.itemList[index].active = false;
},
},
});
</skrip>`
扔个三星炸死你2017-06-12 09:31:44
Di dalam vue, ia bukan melalui vue Walaupun anda menggunakan pembolehubah untuk menyimpan contoh vue melalui ini
vue.itemList[index].active = true;
换成
this.itemList[index].active = true;
阿神2017-06-12 09:31:44
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.
巴扎黑2017-06-12 09:31:44
Mod nilai kunci tidak boleh dipantau oleh vue, vue menyediakan kaedah $set. . Pemadaman juga memerlukan
pilihItem: fungsi (indeks) {
var newA = this.itemList[index];
newA.active = true
this.$set(this.itemList,index,newA)
},
typecho2017-06-12 09:31:44
this.itemList.splice(index, 1, Object.assign({}, this.itemList[index], { active: true }))