需求如图: 根据后台数据循环创建不确定数量的单选el-radio组件时,绑定值都在同一个空对象switchForm下。如果想默认全部通过或一键全部选中通过。必须给创建每一个的绑定值为true,虽然给switchForm下属性成功赋值,但是视图却没有更新,也无法点击选中,那是因为vue无法探测普通的新增属性,新创建赋值的属性不是响应式,所以无法和el-radio绑定,这个时候需要用this.$set()方法让新增属性也是响应式。
data(){
return{
switchForm:{}
}
},
method:{
// 全选通过
checkedAll() {
for (let i = 0; i < this.inforList.length; i++) {
const val = 'value' + this.inforList[i].id;
this.passHandle(this.inforList[i].id, i);
// this.switchForm[val] = true
this.$set(this.switchForm, val, true);
}
},
}