首页程序开发点击多选框，el-checkbox绑定的值变化了,但是页面没有反应

点击多选框，el-checkbox绑定的值变化了,但是页面没有反应

Graent 发布于 2025-01-08 评论(0) 阅读(290)

今天做项目遇到点击element的多选框，通过change事件发现v-model的值变化了，但是页面上没有勾选上

HTML

<el-checkbox v-model="mData.choose" @change="changeCheck($event,mData)"></el-checkbox>

原因：手动添加数据的问题，我将后端返回的数组手动将数组中的每个对象都添加一个key：value键值对的值，然后通过这个值去控制多选框的选中

一开始我是这样做的

this.list.forEach((item,index)=>{
      item.choose = true;
      arr.push(item);
})

上面的做法点击多选框，choose的值变化了，但是页面上没有反应，原因是我们是手动添加的choose字段，这样添加的字段数据不是响应式的，没有get set属性，所以需要用vue的set方法添加对象属性，下面是正确的做法：

this.list.forEach((item,index)=>{
      that.$set(item,'choose',true)
      arr.push(item);
})

如果有更好的办法可以留言，或者如果对你有帮助可以帮忙分享，感谢

标签: el-checkbox element VUE

Graent's博客