多选框是一种非常常见的功能,有时候我们会根据后台返回的数据进行多选框渲染,之前做项目时遇到循环生成多选框时,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. 简单的Cooki案例——记录用户上次访问该网页的时间

    功能: 帮助网站实现提示客户端计算机上次访问网站的时间 实现原理: 将每一个会话作为一次访问过程,将每次会话的开始时间作为每次访问网站的时间,然后将这个时间以Cookie的形式存储到客户端的计算机中, ...

  2. 第20章-使用JMX管理Spring Bean

    Spring对DI的支持是通过在应用中配置bean属性,这是一种非常不错的方法.不过,一旦应用已经部署并且正在运行,单独使用DI并不能帮助我们改变应用的配置.假设我们希望深入了解正在运行的应用并要在运 ...

  3. Linux中的SELinux与chcon以及Samba实现【转】

    一.SELinux SElinux的前身是NSA(美国国家安全局)发起的一个项目.它的目的是将系统加固到可以达到军方级别. 为什么NSA选择Linux呢? 在目前市面上大多数操作系统都是商用闭源的,只 ...

  4. IOS 防坑指南

    1. 读写文件 1. IOS 8 中  stringWithContentsOfFile 已被移除 2. 创建文件必须放到 应用下 Documents 下面 // // FileHelper.swif ...

  5. [other] 代码量代码复杂度统计-lizard

    [other] 代码量代码复杂度统计-lizard lizard的可以用来统计下面的一些数据 不包含代码注释的代码行数 CCN 代码的复杂度,也就是分支复杂度 token的个数(关键字,标示符,常量, ...

  6. Service Fabric 用 Powershell 部署应用到本地

    前置说明 安装 Service Fabric SDK,会在本机 C:\Program Files\Microsoft SDKs\Service Fabric\Tools\PSModule\Servic ...

  7. 十五、Node.js-fs模块（中）

    有了上一篇JS同步异步知识的铺垫,我们一起学习一下fs模块的同步和异步知识: Node.js内置的fs模块就是文件系统模块,负责读写文件. 和所有其它JavaScript模块不同的是,fs模块同时提供 ...

  8. virtueBox实现虚拟机的复制和粘贴

    1.在设备--共享粘贴板--勾选双向. 2.在设备--拖放--勾选双向. 3.在设备--安装增强功能,然后进入虚拟机安装增强功能即可.

  9. Mysql数据库自动定时备份软件推荐--MySqlBackupFTP（免费，亲测可用，附使用图示）

    MySqlBackupFTP是一款Mysql数据库自动定时备份软件,免费版本就基本上可以满足我们的需求,不需要什么破解版,可直接官网下载安装使用. 先看结果(日志): 软件界面: 可以设定计划任务,每 ...

  10. 并不能来一发50AC

    本来想来一发50AC嗨一下 然后发现只有40+ 算了放弃了..