vue.js - Vue2.0 为何在v-for列表中绑定的class不会改变?
本文介绍了vue.js - Vue2.0 为何在v-for列表中绑定的class不会改变?的处理方法,对大家解决问题具有一定的参考价值,需要的朋友们下面随着小编来一起学习吧!
问题描述
问 题
如题,我写了一个组件,如下:
var list = Vue.component("list-menu",{
template:`
<div class="list-menu">
<div v-text='name' class = 'name'></div>
<ul>
<li @click="click(item)" v-for="item in items" :class="{active:item.isActive}">
<div class="" v-text="item.name"></div>
</li>
</ul>
</div>
`,
props:{
"data":{
"required":true
},
'name':{
"required":true
}
},
methods:{
click(v){
this.$parent.$emit("select",v.name);
this.items.forEach(i=>{
i.isActive = false;
})
v.isActive = true;
console.log(this.items)
}
},
computed:{
items(){
var list = [];
this.data.forEach(i=> {
list.push({
name:i,
isActive:false
});
});
return list;
}
}
})
在点击列表之后,组件中的属性值确实改变了,但是dom上没有变化。
怎么办?
解决方案
原因:直接修改computed中items值,dom检测不到items的变化视图不会更新,详情请参考官方API,computed一节,更改代码如下:
var list = Vue.component("list-menu",{
template:`
<div class="list-menu">
<div v-text='name' class = 'name'></div>
<ul>
<li @click="click(item)" v-for="item in items" :class="{active:item.isActive}">
<div class="" v-text="item.name"></div>
</li>
</ul>
</div>
`,
props:{
"data":{
"required":true
},
'name':{
"required":true
}
},
data(){
return{items:[]}
},
mounted(){
this.getItems();
},
methods:{
click(v){
this.$parent.$emit("select",v.name);
this.items.forEach(i=>{
i.isActive = false;
})
v.isActive = true;
},
getItems(){
var list = [];
this.data.forEach(i=> {
list.push({
name:i,
isActive:false
});
});
this.items = list;
}
}
})
这篇关于vue.js - Vue2.0 为何在v-for列表中绑定的class不会改变?的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持IT屋!
查看全文