多选框是一种非常常见的功能,有时候我们会根据后台返回的数据进行多选框渲染,之前做项目时遇到循环生成多选框时,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. 编写高质量代码改善C#程序的157个建议——建议29：区别LINQ查询中的IEnumerable<T>和IQueryable<T>

    建议29:区别LINQ查询中的IEnumerable<T>和IQueryable<T> LINQ查询一共提供了两类扩展方法,在System.Linq命名空间下,有两个静态类:E ...

  2. win32的计数增减操作的原子操作--InterLockedIncrement和InterlockedDecrement

    InterLockedIncrement and InterLockedDecrement 实现数的原子性加减. 什么是原子性的加减呢? 举个例子:如果一个变量 Long value =0; 首先说一 ...

  3. 匿名函数和lamda表达式

    using System; using System.Collections.Generic; using System.Linq; using System.Text; using System.T ...

  4. Visual Studio 2013 新增功能：“Browser Link”

    今天新装了 Visual Studio 2013, 使用 VS2013 打开一个现有的 WEB 网站, 在调试网站的时候出现在了脚本错误,一个文件名叫 "browserLink", ...

  5. [.net 多线程]Monitor

    Monitor 类通过向单个线程授予对象锁来控制对对象的访问.对象锁提供限制访问代码块(通常称为临界区)的能力.当一个线程拥有对象的锁时,其他任何线程都不能获取该锁.还可以使用 Monitor 来确保 ...

  6. Socket网络通讯

    网络编程 使用C#进行网络编程时,通常都需要用到System.Net命名空间.System.Net.Sockets命名空间和System.Net.Mail命名空间: 1. System.Net命名空间 ...

  7. Vue 自定义header

    第一种,全局设置: Vue.http.headers.common['token'] = 'YXBpOnBhc3N3b3Jk'; 第二种,拦截器设置 Vue.http.interceptors.pus ...

  8. Ecliplse导入maven项目applicationContext.xml报错：Referenced file contains errors (http://www.springframework.org/schema/context/spring-context-3.1.xsd). For more information, right click on the message in

    刚刚导入的maven项目的Spring配置文件报错: 大体意思是说: 引用的文件包含错误(http://www.springframework.org/schema/context/springing ...

  9. c++实验2 顺序存储线性表

    线性表顺序存储 实现了动态数组的增删改查  前驱后继  A=AUB 动态数组右移 (1)顺序表存储结构的定义(类的声明): class SeqList { protected: DataType *l ...

  10. spring 学习（三）：aop 学习

    spring 学习(三):aop 学习 aop 概念 1 aop:面向切面(方面)编程,扩展功能不修改源代码实现 2 AOP采取横向抽取机制,取代了传统纵向继承体系重复性代码 3 aop底层使用动态代 ...