element ui-----Checkbox--

最新推荐文章于 2025-06-18 11:30:09 发布

毛栗子~

最新推荐文章于 2025-06-18 11:30:09 发布

阅读量496

点赞数

CC 4.0 BY-SA版权

文章标签： ui javascript vue.js

本文链接：https://blog.youkuaiyun.com/weixin_48975689/article/details/128385506

在Vue中使用ElementUI的Checkbox组件时，遇到一个问题：当后端返回的值为1和0时，Checkbox无法正常选中。原因是Vue没有监听到checked属性的变化。解决方案是利用Vue的$set方法强制监听checked属性，通过遍历数据并设置checked属性为true或false，从而实现视图的同步更新。此方法确保了前端界面与后端数据的正确绑定。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

日常遇到的小问题

在使用Checkbox时，用v-mode绑定值，后端给我的值是1和0，我查看element ui 的文档是可以v-mode可以是string，number，Boolean，但是却不能选中，
在这里插入图片描述
因为
查了一下才知道。
前端添加checked属性， vue并没有添加 get 和 set 方法，因此，监听不到 checked 值变化，进而不能更新view。这点可以在浏览器vue调试中看到，点击时，数据的checked属性 true 和 false 是在交替变化，但是view上没有同步更新。

解决方法

用 vue.$set 方法，强制vue监听checked属性：

// 根据自己的数据结构
 list.map(item=>{
    if(item.permissionStatus == 1){
             this.$set(item,"checked",true)
         }else{
          this.$set(item,"checked",false)
         }
         return item
       });
       this.tableDataGlobalPermission = list