Vue动态生成el-checkbox点击无法选中的解决方法

最近遇到一个问题,在动态生成的多选框当我设置了默认值,进来之后无法修改,不能取消也不能选中其他的选项,
在这里插入图片描述
数据绑定是用的v-model
在这里插入图片描述
后来发现,再现这个问题的原因是当我点击编辑时,是这样赋值的:
在这里插入图片描述
而这个row里面没有字段channelPurposes,所以导致dialogForm里面字段缺失,即使是我单独加上这个也不行,于是,将如上赋值改成下面这种方式就可以了
在这里插入图片描述
改成这样问题解决了,可以自如的选择多选框了。

  • 2
    点赞
  • 3
    收藏
    觉得还不错? 一键收藏
  • 1
    评论
好的,以下是具体代码实现: ```html <template> <div> <h3>水果</h3> <el-checkbox-group v-model="fruitSelection"> <el-checkbox v-for="fruit in fruits" :key="fruit" :label="fruit" @change="handleFruitChange"></el-checkbox> </el-checkbox-group> <h3>蔬菜</h3> <el-checkbox-group v-model="vegetableSelection"> <el-checkbox v-for="vegetable in vegetables" :key="vegetable" :label="vegetable" :disabled="vegetableDisabled"></el-checkbox> </el-checkbox-group> </div> </template> <script> export default { data() { return { fruits: ['苹果', '香蕉', '橙子', '草莓'], vegetables: ['白菜', '胡萝卜', '西红柿', '黄瓜'], fruitSelection: [], vegetableSelection: [], vegetableDisabled: true }; }, methods: { handleFruitChange(checkedFruits) { if (checkedFruits.includes('苹果')) { this.vegetableDisabled = false; } else { this.vegetableSelection = []; this.vegetableDisabled = true; } } } } </script> ``` 以上代码中,我们先定义了两个数组 `fruits` 和 `vegetables` 分别代表水果和蔬菜的可选项。然后又定义了 `fruitSelection` 和 `vegetableSelection` 分别代表水果和蔬菜的选中项,`vegetableDisabled` 代表蔬菜是否禁用。 在模板中,我们使用 `el-checkbox-group` 和 `v-for` 分别渲染出水果和蔬菜的可选项,其中蔬菜的 `el-checkbox` 组件的 `:disabled` 属性绑定了 `vegetableDisabled` 变量,表示当 `vegetableDisabled` 为 `true` 时,蔬菜不可选。 在 `handleFruitChange` 方法中,我们监听水果的选中项变化事件 `@change`,当选中项中包含苹果时,我们将 `vegetableDisabled` 变量设为 `false` 表示蔬菜可以选择,否则将 `vegetableSelection` 清空并将 `vegetableDisabled` 设为 `true` 表示蔬菜不可选。

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论 1
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值