问题描述:将data中数据列表渲染到页面,循环生成 el-switch,点击页面中 el-switch 后数组中某项值改变,但是页面不更新
数据格式如下
export default{
data(){
list : [
{
id : 1,
selected : true,
title : 'aaa'
},
{
id : 2,
selected : false,
title : 'bbb'
},
{
id : 3,
selected : true,
title : 'ccc'
}
]
}
}
原因是因为 利用索引直接设置一个项值之后,Vue不能检测到数据变化 详情参考:https://cn.vuejs.org/v2/guide/list.html#%E6%95%B0%E7%BB%84%E6%9B%B4%E6%96%B0%E6%A3%80%E6%B5%8B
同时官方也提供了相应的api来解决这个问题
vm.$set(vm.items, indexOfItem, newValue)