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>

View Code

附：@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) 方法将响应属性添加到嵌套的对象上。

 1 isChecked:function(item){
 2             this.isLists=[];
 3             var _this=this;
 4             /*选中当前*/
 5             if(typeof item.checked=='undefined'){
 6                 this.$set(item,'checked',true);
 7             }else{
 8                 item.checked=!item.checked;
 9             }
10             console.log('item:'+JSON.stringify(item));
11 
12             /*判断选中个数*/
13             this.lists.forEach(function(item){
14                 if(item.checked){
15                     if(_this.isLists.length<4){
16                         _this.isLists.push(item);
17                     }else{
18                         item.checked=false;
19                         alert('最多选择4个');
20                     }
21                 }
22             });
23             //console.log('isLists:'+JSON.stringify(this.isLists));
24         }

View Code

3.汇总

 1 <div id="hobby">
 2     <div class="lists">
 3         <ul>
 4             <li class="border_first_after" v-for="(item,index) in lists" @click="isChecked(item)">
 5                 <div class="flex_parent">
 6                     <div class="lists_left">{{item.name}}</div>
 7                     <div class="flex_child lists_right">
 8                         <span class="isSelected" :class="{isChecked:item.checked}">√</span>
 9                     </div>
10                 </div>
11             </li>
12         </ul>
13     </div>
14     <p class="remarks">最多选择4个</p>
15     <div style="text-align: right">
16         <input class="saveBtn" type="button" value="保存" @click="save">
17     </div>
18 </div>

View Code

 1 /**
 2  * Created by aaron on 2017/4/26.
 3  */
 4 new Vue({
 5     el:'#hobby',
 6     data:{
 7         checked:false,
 8         isLists:[],
 9         lists:[
10             {name:'亲子活动'},
11             {name:'体育赛事'},
12             {name:'DIY其他'},
13             {name:'多人聚会'},
14             {name:'慈善公益'},
15             {name:'周别户外'}
16         ]
17     },
18     methods:{
19         isChecked:function(item){
20             this.isLists=[];
21             var _this=this;
22             /*选中当前*/
23             if(typeof item.checked=='undefined'){
24                 this.$set(item,'checked',true);
25             }else{
26                 item.checked=!item.checked;
27             }
28             console.log('item:'+JSON.stringify(item));
29 
30             /*判断选中个数*/
31             this.lists.forEach(function(item){
32                 if(item.checked){
33                     if(_this.isLists.length<4){
34                         _this.isLists.push(item);
35                     }else{
36                         item.checked=false;
37                         alert('最多选择4个');
38                     }
39                 }
40             });
41             //console.log('isLists:'+JSON.stringify(this.isLists));
42         },
43         save:function(){
44             console.log('isLists:'+JSON.stringify(this.isLists));
45         }
46     }
47 });