多选框是一种非常常见的功能,有时候我们会根据后台返回的数据进行多选框渲染,之前做项目时遇到循环生成多选框时,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. 升级Ubuntu 12.04下的gcc到4.7

    我们知道C++11标准开始支持类内初始化(in-class initializer),Qt creator编译出现error,不支持这个特性,原因在于,Ubuntu12.04默认的是使用gcc4.6, ...

  2. Oracle 定时任务讲解

    前几天,公司的job调度出现了问题,由于权限管的严,没有查看oracle 一些重要的数据字典,后面联系DBA,是由于数据库切换到备机时,参数设置不对,导致db job没有正常调度. 今天刚好有时间,想 ...

  3. IOS GPS跟踪备注

    CLLocationManager还提供了如下类方法来判断当前设备的定位相关服务状态. Ø + locationServicesEnabled:返回当前定位服务是否可用. Ø + deferredLo ...

  4. windows phone之山寨win8圆形进度条

    <ResourceDictionary xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation" x ...

  5. [.net 多线程]Barrier

    当需要[一组任务]并行地运行一连串的阶段,但是每一个阶段都要等待所有他任务完成前一阶段之后才能开始,可以通过Barrier实例来同步这一类协同工作.Barrier初始化后,将等待特定数量的信号到来,这 ...

  6. form表单以get方式提交时action中?后面的参数部分不生效

    form表单的提交方式是get方式,action="?sss=test",问号后面参数是接受不到的,谨记!

  7. Struts2学习第3天--OGNL、EL、值栈

    JAVA中的OGNL: 1 调用对象的方法: 2 访问对象的静态方法: 3 获取OGNLContext.Root中的数据. User: 4 访问Context: 关键还是在Struts2环境中的使用: ...

  8. kali linux之主动信息收集（三层发现，四层发现）

    三层发现: 比二层发现的优点即可路由,就是速度比二层慢,相对我们来说还是算快的,经常被边界防火墙过滤 ip icmp协议 OSI七层模型

  9. 51nod1832(二叉树/高精度模板+dfs)

    题目链接: http://www.51nod.com/onlineJudge/questionCode.html#!problemId=1832 题意: 中文题诶~ 思路: 若二叉树中有 k 个节点只 ...

  10. gluster peer probe: failed: Probe returned with unknown errno 107解决方法

    当在glusterfs中将服务器加到存储池中,及运行”gluster peer probe server”命令, 遇到peer probe: failed: Probe returned with u ...