v-for循环创建多组el-radio(单选),同时创建绑定赋值后无法选中的问题

1,360 阅读1分钟

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

image.png

image.png

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);
      }
    },
}