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

    题目意思: 给一颗n个节点的树,每个节点有一个值要么是0要么是1,改变某个节点的值时,它的儿子不变,它儿子的儿子翻转,它儿子的儿子的儿子不变,如此类推.给定各个节点的目标值,求最少的翻转次数,使得达到 ...

  2. python核心编程第2章课后题答案（第二版36页）

    2-5 Loops and Numbers a) i = 0    while i <11:     print i    i += 1 b) for i in range(0,11): pri ...

  3. (转)初试konckout+webapi简单实现增删改查

    原文地址:http://www.cnblogs.com/flykai/p/3361064.html 前言 konckout.js本人也是刚刚接触,也是初学,本文的目的是使用ko和asp.net mvc ...

  4. 国外物联网平台（7）：FogHorn

    国外物联网平台(7) ——FogHorn 马智 引言: 据外媒在本月20日报道,硅谷初创公司FogHorn正在与谷歌合作以简化工业物联网应用的部署.本文对FogHorn的技术.产品.应用和生态进行了分 ...

  5. Win7下：编译器错误信息: CS0016

    解决办法: 原因是由于系统目录下的Temp目录无相应的权限所致,具体操作如下: 来到C:/Windows目录,修改temp文件夹的属性. 在安全页设置IIS-IUSRS的权限,赋予修改.读取.写入等权 ...

  6. js工具库简单介绍

    javascript mvc的解决方案: angularjs, backbone,underscore, 有空的时候了解一下. 移动端的几个需要了解一下,jq mobile, zepto.knocko ...

  7. MSSQL中数据库对象类型解释

    public string GetObjectTypeName(object oType) { switch (oType+"") { case "U": re ...

  8. HTML4.0 需要掌握的主要内容

    常用标签: <html></html> 创建一个HTML文档 <head></head> 设置文档标题和其它在网页中不显示的信息 <title&g ...

  9. 析构函数的调用------新标准c++程序设计

    示例1: #include<iostream> using namespace std; class CDemo{ public: ~CDemo(){cout<<"d ...

  10. openfiler的介绍与使用

    一. Openfiler简介 Openfiler 能把标准x86/64架构的系统变成一个强大的NAS.SAN存储和IP存储网关,为管理员提供一个强大的管理平台,并能能应付未来的存储需求.依赖如VMwa ...