Wie unten gezeigt, verwende ich v-for, um diese Artikelliste in HTML darzustellen, und steuere durch die Aktivierung jedes Artikels, ob der diesem Artikel entsprechende HTML-Code angezeigt (v-show) werden soll.
Wenn Sie jedoch wie folgt über die Ereignismethode „Item“ auswählen und die „itemList“ ändern, wird der Dom nicht aktualisiert? ? ?
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改成this
selectItem里console.log(index)有值吗,应该是用this来获取这个vue对象
修改数据方法都不对,不报错吗?
按照你提供的数据格式,我试了一下,是可以的,代码如下
`<p id="app">
<li v-for="(item,index) in itemList" v-on:click="selectItem(index)" v-if="item.active">
</li>
</p>
<script>
</script>`
在vue内部 不是通过vue来点 即使你用了一个变量来保存 vue的实例 通过 this
你html里面怎么写的,虽然你这js代码写的不够优雅,比如这里使用数组比对象更合适,但是也没错,我觉得你dom没有渲染不是这里的问题,应该是绑定表单控制,如select 数据单向流的问题。
键值的模式不能被vue监听到,vue提供了$set的方法。。删除也需要
selectItem: function (index) {
},
把Vue改为this试下
this.itemList.splice(index, 1, Object.assign({}, this.itemList[index], { active: true }))