v-for并判断当前元素是否选中：$set实现响应添加属性

前言

一直纠结着使用v-for进行列表渲染时如何为当前的元素添加是否选中的标识。

1.v-for进行列表渲染

/**
* Created by aaron on 2017/4/26.
*/
new Vue({
el:'#hobby',
data:{
checked:false,
isLists:[],
lists:[
{name:'亲子活动'},
{name:'体育赛事'},
{name:'DIY其他'},
{name:'多人聚会'},
{name:'慈善公益'},
{name:'周别户外'}
]
},
methods:{
isChecked:function(item){
this.isLists=[];
var _this=this;
/*选中当前*/
if(typeof item.checked=='undefined'){
this.$set(item,'checked',true);
}else{
item.checked=!item.checked;
}
console.log('item:'+JSON.stringify(item));

/*判断选中个数*/
this.lists.forEach(function(item){
if(item.checked){
if(_this.isLists.length<4){
_this.isLists.push(item);
}else{
item.checked=false;
alert('最多选择4个');
}
}
});
//console.log('isLists:'+JSON.stringify(this.isLists));
},
save:function(){
console.log('isLists:'+JSON.stringify(this.isLists));
}
}
});

View Code



4.更多

参考：vue官网：https://cn.vuejs.org/v2/guide/reactivity.html

　　 vue总结：https://segmentfault.com/a/1190000005832164