As shown below, I use v-for to render this itemList in html, and control whether to display (v-show) the html corresponding to this item through the active of each item.
However, if the itemList is changed through the event method selectItem like this, the dom is not updated? ? ?
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].active = true; vue changed to this
Is there a value for console.log(index) in selectItem? You should use this to get this vue object
The method of modifying data is incorrect, so no error is reported?
According to the data format you provided, I tried it and it works. The code is as follows
`<p id="app">
<li v-for="(item,index) in itemList" v- on:click="selectItem(index)" v-if="item.active">
</li>
</p>
<script>
</script>`
Inside vue, it is not through vue. Even if you use a variable to save the instance of vue through this
How do you write it in your html? Although your js code is not elegant enough, for example, it is more appropriate to use arrays instead of objects here, but it is also correct. I think the failure of your dom to render is not the problem here. It should be bound to the form control. Such as the problem of one-way flow of select data.
The key value mode cannot be monitored by vue, vue provides the $set method. . Deletion also requires
selectItem: function (index) {
},
Change Vue to this and try it
this.itemList.splice(index, 1, Object.assign({}, this.itemList[index], { active: true }))