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

前言

一直纠结着使用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