当前位置：首页 > article >正文

vue2使用el-checkbox不能选中，解决方法

article 2024/11/27 0:39:08

下面的代码偶尔会出现点复选框没有反应的问题

解决方法就是：

1、使用$set给绑定的字段重新赋值，

2、强制刷新this.$forceUpdate()

<el-checkbox-group v-model="ruleForm.type" class="om-input-style">
                    <el-checkbox v-for="(item, index) in typeList" :key=index" :label="item.value">{{item.label}}</el-checkbox>
                </el-checkbox-group>

data () {
    return {
      ruleForm: {
        type: [],'
      },
    typeList: [
        {label:'音频设备', value: '1111'},
        {label:'直播设备', value: '2222'}
    ]
  },

使用场景：假装要编辑一个表单。open这个方法是打开一个弹窗，弹窗里有表单，表单中有一个复选框组，对表单赋值。

// 假装这个方法是打开一个弹窗，弹窗里有表单，表单中有一个复选框组 
open (obj) {
        this.ruleForm = obj  // 这样看着是更新了这个对象，但是对于vue2来说，深层的对象不会实时更新，必须单独做如下处理，尤其是对象有多级时，比如obj.a.c.d这种
        if (obj && obj.id) {
          console.log('编辑')
          this.$set(this.ruleForm, 'type', obj.type)
          this.$forceUpdate()
          // 上面两个方法二选一
        }
      })
    },

查看全文

http://www.kler.cn/a/410664.html