checkbox绑定v-for的数据
简述自己遇到的问题,觉得合适就拿去用
我在使用v-for遍历checked复选框数据的时候,数据分为两部分,一个主活动,主活动下面有多个子活动
我实体类的设计是里面加个list放子活动,
页面循环需要遍历主活动和子活动,
那这样内部的子活动就v-for,主活动就不能遍历了,主活动默认选中,
之后需要全选操作,遇到的问题就是点击全选无法选中第一个,
但是断点查看的时候,却发现在断点结束前是选中的,这个就很无语
之后解决了,我就直接贴代码了
<!DOCTYPE html>
<html> <head>
<meta charset="UTF-8">
<title></title>
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1" />
</head> <body>
<section class="layout" id="app">
<section class="content content-login">
<label>
<input type="checkbox" :value="dataList" v-model="param">
{{dataList.name}}
<br/>
</label>
<label v-for="item in dataList.list">
<input type="checkbox" :value="item" v-model="param"/>
{{item.name}}
<br/>
</label>
<br/> <label > <input type="checkbox" v-model="selectAll" @change="allChange"> 全选</label> <br/> {{param}}
</section>
</section>
</body> </html> <script src="vue.js"></script>
<script type="text/javascript">
new Vue({
el: '#app',
data: {
selectAll: false,
dataList: {
recno: 1,
name: 'd1',
list: [{
recno: 2,
name: 'd2'
}, {
recno: 3,
name: 'd3'
}, {
recno: 4,
name: 'd4'
}]
},
param:[]
},
methods: {
allChange: function() {
if(this.selectAll) {
this.param = [];
this.param.push(this.dataList);
for(var i in this.dataList.list) {
this.param.push(this.dataList.list[i]);
}
}else {
this.param = [];
}
}
}
})
</script>
checkbox绑定v-for的数据的更多相关文章
- TreeView树形控件递归绑定数据库里的数据
TreeView树形控件递归绑定数据库里的数据. 第一种:性能不好 第一步:数据库中查出来的表,字段名分别为UNAME(显示名称),DID(关联数据),UTYPE(类型) 第二步:前台代码 <% ...
- Windows Phone 8初学者开发—第14部分:在运行时绑定到真实的数据
原文 Windows Phone 8初学者开发—第14部分:在运行时绑定到真实的数据 第14部分:在运行时绑定到真实的数据 原文地址: http://channel9.msdn.com/Series/ ...
- vs 2015 rdlc报表绑定datagridview中的数据
这几天一直想要实现rdlc报表绑定datagridview中的数据,始终在虚拟表向rdlc报表绑定这一步上出错.今天从下午4点到七点四十一直在尝试.最终还是实现了,最然并不知所以然,这个问题还是以后在 ...
- JavaScript 绑定事件时传递数据
var data = { name: 'Ruchee', email: 'my@ruchee.com' }; data.handleEvent = function (e) { console.log ...
- springmvc-高级参数绑定-映射-异常-json数据交互-拦截器
1.1. 高级参数绑定 1.1.1. 复制工程 把昨天的springmvc-web工程复制一份,作为今天开发的工程 复制工程,如下图: 粘贴并修改工程名为web2,如下图: 工程右键点击,如下图: 修 ...
- HTML5 Web app开发工具Kendo UI Web中如何绑定网格到远程数据
在前面的文章中对于Kendo UI中的Grid控件的一些基础的配置和使用做了一些介绍,本文来看看如何将Kendo UI 中的Grid网格控件绑定到远程数据. 众所周知Grid网格控件是用户界面的一个重 ...
- My安卓知识2--使用listview绑定sqlite中的数据
我想在我的安卓项目中实现一个这样的功能,读取sqlite数据库中的数据并显示到某个页面的listview控件中. 首先,我建立了一个Service类,来实现对数据库的各种操作,然后在这个类中添加对数据 ...
- 为GCD队列绑定NSObject类型上下文数据-利用__bridge_retained(transfer)转移内存管理权-备
下面评论的好友“@Jim”给了种新的思路,就是在清除context的函数里面,用“_bridge_transfer”转换context,把context的内存管理权限重新交给ARC,这样,就不用显式调 ...
- php获取checkbox数组的表单数据
提交表单的时候,对于checkbox多选框,name="field[]",此时php获取的数组为:从0开始的索引数组:如果name="field[n]" 有数字 ...
随机推荐
- MS SQL Server的COALESCE函数
MS SQL Server的COALESCE函数是从一系列表达式中返回第一个NOT NULL的值. 检查[B],[Q],[S],[T],[U]的值: 检查顺序[B]->[Q]->[S]-& ...
- 从网络架构方面简析循环神经网络RNN
一.前言 1.1 诞生原因 在普通的前馈神经网络(如多层感知机MLP,卷积神经网络CNN)中,每次的输入都是独立的,即网络的输出依赖且仅依赖于当前输入,与过去一段时间内网络的输出无关.但是在现实生活中 ...
- hihocoder1475 数组分拆【DP+前缀和优化】
思路: DP[ i ] 代表以 i 结尾的方案数. dp[i] += sum[i] - sum[j - 1] != 0 ? dp[j] : 0 ; 对于100%的数据,满足1<=N<=10 ...
- hdu 5033 buiding(单调栈)
hdu 5033 buiding(单调栈) 某年某月某天,马特去了一个小镇.这个小镇如此狭窄,以至于他可以把小镇当作一个枢纽.在镇上有一些摩天大楼,其中一栋位于xi,高度为hi.所有的摩天大楼位于不同 ...
- jquery 插件的实现和优化
1.menus 实现: $.fn.menu=function(options){ var $this=$(this); var cross='<div class="zhiniu_cr ...
- JAVA之动态编译
通过Java动态生成class文件 今天说下JAVA中的动态编译,这个功能根据我现在的了解好像没有见到过用的,我Jio的吧,现在的一些在线代码编缉器可以用到了,这个具体我也不是很清楚.感兴趣的大家可以 ...
- 用Java创建JMeter变量 - 终极指南
了解如何在Java中创建不同类型的JMeter变量,不同变量类型的详细信息以及如何避免错误. 在Apache JMeter™中编写负载或功能测试涉及使用不同类型的变量.变量有多种用途,例如,在以下情况 ...
- Django (十三) 项目部署 3
阿里云项目部署 部署Django项目 1, 配置nginx 1.1 进入:cd /var/www, 将外面压缩好的AXF项目拖入xshell中,并解压 1.2 配置nginx.conf: 将htt ...
- Java通过图片url地址获取图片base64位字符串的两种方式
工作中遇到通过图片的url获取图片base64位的需求.一开始是用网上的方法,通过工具类Toolkit,虽然实现的代码比较简短,不过偶尔会遇到图片转成base64位不正确的情况,至今不知道为啥. 之后 ...
- 关于byte[]和字符串的转换
public static String byteToStr(byte[] b) { return new String(b); } public static byte[] strToByte(St ...