点击多选框,el-checkbox绑定的值变化了,但是页面没有反应
今天做项目遇到点击element的多选框,通过change事件发现v-model的值变化了,但是页面上没有勾选上
<el-checkbox v-model="mData.isCheck" @change="changeCheck($event,mData)"></el-checkbox>
原因:手动添加数据的问题,我将后端返回的数组手动将数组中的每个对象都添加一个key:value键值对的值,然后通过这个值去控制多选框的选中
一开始我是这样做的
var result = data.list.map(function(item) { item.isCheck = false return item }) this.mListDatas.list = result
上面的做法点击多选框,isCheck的值变化了,但是页面上没有反应,原因是我们是手动添加的isCheck字段,这样添加的字段数据不是响应式的,没有get set属性,所以需要用vue的set方法添加对象属性,
下面是正确的做法:
that.mListDatas = data; // 从后台返回的数据没有isCheck这个字段 var result = data.list.map(function(item) { that.$set(item,'isCheck',false) return item }) that.mListDatas = result // 这样数组中的每一个对象都有isCheck这个字段
另一种做法给数组中的对象添加一个键值对,这种方法时直接返回一个新的数组
let array = [] data.list.map(function(item) { array.push( Object.assign({},item,{isSelectList:[]}) ) })
加油!
【推荐】编程新体验,更懂你的AI,立即体验豆包MarsCode编程助手
【推荐】博客园携手 AI 驱动开发工具商 Chat2DB 推出联合终身会员
【推荐】抖音旗下AI助手豆包,你的智能百科全书,全免费不限次数
【推荐】轻量又高性能的 SSH 工具 IShell:AI 加持,快人一步
· .NET 依赖注入中的 Captive Dependency
· .NET Core 对象分配(Alloc)底层原理浅谈
· 聊一聊 C#异步 任务延续的三种底层玩法
· 敏捷开发:如何高效开每日站会
· 为什么 .NET8线程池 容易引发线程饥饿
· .NET 9.0 使用 Vulkan API 编写跨平台图形应用
· 终于决定:把自己家的能源管理系统开源了!
· [.NET] 使用客户端缓存提高API性能
· AsyncLocal的妙用
· .NetCore依赖注入(DI)之生命周期
2019-05-18 编写SQL语句时的注意事项