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