Vue中动态添加Class

Question

在项目中有个v-for循环出来的列表，循环对象在computed周期里现在想对这个列表添加点击事件，点击时添加一个class，但是并没有立即成功（更新dom？），要在别的地方触发别的事件（如果有的话）才有反应。下面附上代码：html:{{item.text}}js:exportdefault{name:'App2',data(){return{//由于一些需求，arr不能写在这}},methods:{isActive:function(item,status){console.log(item.checked)if(typeofitem.checked=='undefined'){this.$set(item,'checked',true);}else{item.checked=!item.checked;}console.log(item.checked)},},computed:{arr:function(){return[{text:"A"},{text:"B"},{text:"C"},{text:"D"}]},}}css:.col-5{float:left;width:25%;color:#fff;}.col-5p{background:#000;line-height:50px;text-align:center;}.col-5p.selectActive{background:#f00;}请大佬们指教一下……

Answer 1

你直接调用this.$set(item,'checked',true);无法触发视图更新，因为你computed中的arr依赖的值不是data中的数据，可以手动触发视图更新。
isActive:function(item,status){
console.log(item.checked)
if(item.checked==undefined){
item.checked=true
}else{
item.checked=!item.checked
}
this.$forceUpdate()
console.log(item.checked)
},
建议你arr还是写在data中。
                            

Answer 2

在data里面设置字段，这样应该可以触发事件：
data(){
return{
arr:[
{text:"A",checked:false},
{text:"B",checked:false},
{text:"C",checked:false},
{text:"D",checked:false}
]
}
},