点击多选框,el-checkbox绑定的值变化了,但是页面没有反应
2021/5/18 18:55:45
本文主要是介绍点击多选框,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这个字段
这篇关于点击多选框,el-checkbox绑定的值变化了,但是页面没有反应的文章就介绍到这儿,希望我们推荐的文章对大家有所帮助,也希望大家多多支持为之网!
- 2024-06-29易优CMS安装常见问题汇总-icode9专业技术文章分享
- 2024-06-28易优新手必读安装教程-icode9专业技术文章分享
- 2024-06-28忘记eyoucms后台密码怎么办?-icode9专业技术文章分享
- 2024-06-26终极指南:Scrum中如何设置需求优先级
- 2024-06-26AI大模型企业应用实战(25)-为Langchain Agent添加记忆功能
- 2024-06-26小白家庭 nas 搭建方案-icode9专业技术文章分享
- 2024-06-23AI大模型企业应用实战(14)-langchain的Embedding
- 2024-06-23AI大模型企业应用实战(15)-langchain核心组件
- 2024-06-23AI大模型企业应用实战(16)-langchain核心组件
- 2024-06-23AI 大模型企业应用实战(06)-初识LangChain