后台给的返回值如下所示：
data = [{name:'张三',id:'1'}，{name:'李四',id:'2'}，{name:'王五',id:'3'}]
要实现的功能：点击选中，再点就取消选中
想到的方案是往对象中添加active属性，默认为false，点击变为true，再点变为false，周而复始...
错误方案示例：
for (var i = 0; i < data.length; i++) {
this.data[i].active = false
}
该方法确实在每个对象中都添加了active属性，但该属性并不能响应式的根据数据变化。
原因是：Vue 不能检测到对象属性的添加或删除。由于 Vue 会在初始化实例时对属性执行 getter/setter 转化过程，所以属性必须在 data 对象上存在才能让 Vue 转换它，这样才能让它是响应的。
解决方案如下：
for (var i = 0; i < data.length; i++) {
this.$set(this.data [i], 'active', false);
}
网友评论