前言
一直纠结着使用v-for进行列表渲染时如何为当前的元素添加是否选中的标识。
1.v-for进行列表渲染
<div class="lists">
<ul>
<li class="border_first_after" v-for="(item,index) in lists" @click="isChecked(item)">
<div class="flex_parent">
<div class="lists_left">{{item.name}}</div>
<div class="flex_child lists_right">
<span class="isSelected" :class="{isChecked:item.checked}">√</span>
</div>
</div>
</li>
</ul>
</div>
附：@click=‘isChecked(item)’，变化检查问题方法，：class='{isChecked:item.checked}',为当前对象添加标识。
2.this.$set():变化检查问题
受现代 JavaScript 的限制（以及废弃 Object.observe），Vue 不能检测到对象属性的添加或删除。
由于 Vue 会在初始化实例时对属性执行 getter/setter 转化过程，所以属性必须在 data 对象上存在才能让 Vue 转换它，
这样才能让它是响应的。
Vue 不允许在已经创建的实例上动态添加新的根级响应式属性(root-level reactive property)。然而它可以使用
Vue.set(object, key, value) 方法将响应属性添加到嵌套的对象上。
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));
}
3.汇总
<div id="hobby">
<div class="lists">
<ul>
<li class="border_first_after" v-for="(item,index) in lists" @click="isChecked(item)">
<div class="flex_parent">
<div class="lists_left">{{item.name}}</div>
<div class="flex_child lists_right">
<span class="isSelected" :class="{isChecked:item.checked}">√</span>
</div>
</div>
</li>
</ul>
</div>
<p class="remarks">最多选择4个</p>
<div style="text-align: right">
<input class="saveBtn" type="button" value="保存" @click="save">
</div>
</div>
/**
* 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));
}
}
});
4.更多
参考：vue官网：https://cn.vuejs.org/v2/guide/reactivity.html
vue总结：https://segmentfault.com/a/1190000005832164