多选框是一种非常常见的功能,有时候我们会根据后台返回的数据进行多选框渲染,之前做项目时遇到循环生成多选框时,v-model绑定的值会随着选中与取消改变,但页面却不会变化
的情况,后来测试了一下,发现多选框的数据类似只能在页面上渲染一次.先看一下我项目中遇到的情况:
 
页面渲染出来的效果是这样的,根据后台数据循环生成的
 
后台返回的数据:
 
 
一开始我是先把后台的值赋值给页面需要渲染的数据,在遍历数据增加一个ischeck值来控制多选框的选择
 
 
HTML代码
 
 
但是这样渲染出来之后,发现页面的选择框勾选不了,而且选择框的isCheck值一直为true
 
 
于是改变后台数据的处理,改为先给后台数据加上isCheck这个值,再赋值给页面渲染的data,这样渲染之后就能够勾选
 
   
 
思考了一下,大概是因为一开始赋值之后,页面已经渲染了,之后再加的数据没有放入Vue数据的监听中,所以在Vue中,如果是数据赋值,最好把数据处理好后再赋值,避免赋值后二次操作

在Vue中由后台数据循环生成多选框CheckBox时的注意事项的更多相关文章

  1. vue中如何实现数据的双向绑定

    vue中如何实现数据的双向绑定 实现视图变化数据跟着变:分两步,上面get中的为第二步(即再次读取的时候会调用get方法得到之前设置的值,以此来实现动态改变) 由于直接写obj.name = this ...

  2. el-dialog对话弹框中根据后台数据无限制添加el-select标签，并进行展示，搜索，删除

    前几天遇到一个题,el-dialog对话弹框中根据后台数据无限制添加el-select标签,并进行展示,搜索,删除,在这上面用到了递归算法,废话不多说,直接上代码 <template> & ...

  3. Vue Router根据后台数据加载不同的组件(思考->实现->不止于实现)

    实际项目中遇到的需求 同一个链接需要加载不同的页面组件.根据用户所购买服务的不同,有不同的页面展现. 有一些不好的实现方式 直接把这几个组件写在同一个组件下,通过v-if去判断.如果这么做的话,甚至可 ...

  4. [oldboy-django][2深入django]老师管理 -- form表单如何生成多选框标签，多选框的默认值显示，以及多选框数据插入到数据库，多选框数据更改到数据库

    1 form表单如何生成多选框(包含了多选框可选择内容) - Form设置班级输入框为 select多选 - 多选 class TeacherForm(Form): name = fields.Cha ...

  5. QTableView中嵌入复选框CheckBox 的四种方法总结

    搜索了一下,QTableView中嵌入复选框CheckBox方法有四种: 第一种不能之前显示,必须双击/选中后才能显示,不适用. 第二种比较简单,通常用这种方法. 第三种只适合静态显示静态数据用 第四 ...

  6. python QQTableView中嵌入复选框CheckBox四种方法

    搜索了一下,QTableView中嵌入复选框CheckBox方法有四种: 第一种不能之前显示,必须双击/选中后才能显示,不适用. 第二种比较简单,通常用这种方法. 第三种只适合静态显示静态数据用 第四 ...

  7. vue结合element-ui实现二级复选框checkbox

    vue结合element-ui实现二级复选框checkbox 话不多说先上效果 交互:1.点击按钮全选,所有的checkbox全部选中:点击清空,所有的checkbox框都不选:点击确定获取选中的ch ...

  8. ［原创］纯JS实现网页中多选复选框checkbox和单选radio的美化效果

    图片素材: 最终效果图: <html><title> 纯JS实现网页中多选复选框checkbox和单选radio的美化效果</title><head>& ...

  9. 雷林鹏分享：jQuery EasyUI 数据网格 - 添加复选框

    jQuery EasyUI 数据网格 - 添加复选框 本实例演示如何放置一个复选框列到数据网格(DataGrid).通过复选框,用户将可以选择 选中/取消选中 网格行数据. 为了添加一个复选框列,我们 ...

随机推荐

  1. git之对比svn

    关于git的发展和历史介绍网上有很多资料,大家可以自行去了解,这里给大家一个传送门git介绍在这里我就不多说了.我们今天本篇文章的定位就是帮助大家来了解一下关于git和svn之间的区别及git的安装. ...

  2. svn ank问题

    subvesion detected a working copy that need upgrade in 可以先在文件夹下cleapup,然后打开解决方案,在解决方案的右键选择upgrade wo ...

  3. Load-time relocation of shared libraries

    E原文地址:http://eli.thegreenplace.net/2011/08/25/load-time-relocation-of-shared-libraries/ This article ...

  4. （转）对存储过程进行加密和解密(SQL 2008/SQL 2012)

    原文地址:http://www.cnblogs.com/wghao/archive/2012/12/30/2837642.html 开始: 在网络上,看到有SQL Server 2000和SQL Se ...

  5. 史融资2.5亿的“自主国产”红芯浏览器，其实是个套壳Chrome

    红芯浏览器 今天早上看到朋友发的浏览器图片,感觉很好奇,然后就看了下,感觉文章还不错,就转发了下,然后下载浏览器着实花了不小心思,最后文末添加了红芯浏览器转存在蓝奏云盘的下载连接了. 文章原文 今天又 ...

  6. MYSQL常用日期操作

    mysql查询今天.昨天.7天.近30天.本月.上一月 数据 今天 select * from 表名 where to_days(时间字段名) = to_days(now()); 昨天 SELECT ...

  7. 最全面的jackson json 技术

    http://www.360doc.com/content/12/0429/09/7656232_207428466.shtml

  8. 享元（Flyweight）模式

    享元(Flyweight)模式:运用共享技术有效的支持大量细粒度的对象. /* * 抽象享元(Flyweight)角色:此角色是所有的具体享元类的超类,为这些类规定出需要实现的公共接口. 那些需要外蕴 ...

  9. 家用wifi信号覆盖增强扩展实用指南

    家用wifi信号覆盖增强扩展实用指南 现在网上很多号称穿墙王的无线路由器,但是一般用起来效果都不理想,其实最主要的原因还是家里面一般每个房间不大,但是墙比较多.并且一般也没有一个所谓的中心点放置路由器 ...

  10. indexDB的使用和异步图片blob文件保存

    //调整webkit兼容性 var indexedDB = window.indexedDB || window.webkitIndexedDB || window.mozIndexedDB || w ...