简述自己遇到的问题，觉得合适就拿去用

我在使用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的数据的更多相关文章

  1. TreeView树形控件递归绑定数据库里的数据

    TreeView树形控件递归绑定数据库里的数据. 第一种:性能不好 第一步:数据库中查出来的表,字段名分别为UNAME(显示名称),DID(关联数据),UTYPE(类型) 第二步:前台代码 <% ...

  2. Windows Phone 8初学者开发—第14部分：在运行时绑定到真实的数据

    原文 Windows Phone 8初学者开发—第14部分:在运行时绑定到真实的数据 第14部分:在运行时绑定到真实的数据 原文地址: http://channel9.msdn.com/Series/ ...

  3. vs 2015 rdlc报表绑定datagridview中的数据

    这几天一直想要实现rdlc报表绑定datagridview中的数据,始终在虚拟表向rdlc报表绑定这一步上出错.今天从下午4点到七点四十一直在尝试.最终还是实现了,最然并不知所以然,这个问题还是以后在 ...

  4. JavaScript 绑定事件时传递数据

    var data = { name: 'Ruchee', email: 'my@ruchee.com' }; data.handleEvent = function (e) { console.log ...

  5. springmvc-高级参数绑定-映射-异常-json数据交互-拦截器

    1.1. 高级参数绑定 1.1.1. 复制工程 把昨天的springmvc-web工程复制一份,作为今天开发的工程 复制工程,如下图: 粘贴并修改工程名为web2,如下图: 工程右键点击,如下图: 修 ...

  6. HTML5 Web app开发工具Kendo UI Web中如何绑定网格到远程数据

    在前面的文章中对于Kendo UI中的Grid控件的一些基础的配置和使用做了一些介绍,本文来看看如何将Kendo UI 中的Grid网格控件绑定到远程数据. 众所周知Grid网格控件是用户界面的一个重 ...

  7. My安卓知识2--使用listview绑定sqlite中的数据

    我想在我的安卓项目中实现一个这样的功能,读取sqlite数据库中的数据并显示到某个页面的listview控件中. 首先,我建立了一个Service类,来实现对数据库的各种操作,然后在这个类中添加对数据 ...

  8. 为GCD队列绑定NSObject类型上下文数据-利用__bridge_retained(transfer)转移内存管理权-备

    下面评论的好友“@Jim”给了种新的思路,就是在清除context的函数里面,用“_bridge_transfer”转换context,把context的内存管理权限重新交给ARC,这样,就不用显式调 ...

  9. php获取checkbox数组的表单数据

    提交表单的时候,对于checkbox多选框,name="field[]",此时php获取的数组为:从0开始的索引数组:如果name="field[n]" 有数字 ...

随机推荐

  1. JavaScript 的基本语法

    说明:此类博客来自以下链接,对原内容做了标注重点知识,此处仅供自己学习参考! 来源:https://wangdoc.com/javascript/basic/introduction.html 1. ...

  2. JVM内存GC的骗局

    此文已由作者尧飘海授权网易云社区发布. 欢迎访问网易云社区,了解更多网易技术产品运营经验. 概述 在日常程序开发中,很多JAVA程度员不太关心内存的使用情况.当然,如果程序员运气较好或者系统没有大规模 ...

  3. Fiddler如何抓取HTTPS协议的网页

    Fiddler默认只能抓取HTTP协议的网页,不能抓取HTTPS协议的网页,而我们很多时候,都需要抓HTTPS协议的网页,比如抓淘宝数据等.今天,韦玮老师会为大家讲解如何使用Fiddler抓取HTTP ...

  4. java接口中成员变量和方法的默认修饰符(转)

    Java的interface中,成员变量的默认修饰符为:public static final 所以我们在interface中定义成员变量的时候,可以 1:public static final St ...

  5. 使用CCProxy代理遇到的问题

    第一种:打开CCProxy后,客户端电脑无法连接上. 解决方案:主机是否开启了360里面的局域网隐藏,这个一定要关闭,否则客户端无法找到主机.另外一种情况,主机关闭局域网隐藏之后,一直遭受ARP攻击, ...

  6. SpringMVC之WebMVC介绍

    一.MVC是什么 二.常用的MVC框架 三.MVC模式的优缺点 四.SpringMVC简介

  7. 数据库性能分析 慢查询 profile工具

  8. UVaLive6435（dp）

    要点 题意:两个数据传输数列,每个数列里有若干个数据包并给出发出时间\(t\),每个数据包到达的时间\(T\)是\(t <= T < t + D\),问有多少种到达序列. 将题目转化为第二 ...

  9. 常见的HTTP状态码说明

    1.说明 HTTP服务器状态代码定义(Status Code Definitions) 做测试的时候,会产生比较多的HTTP错误,查看其错误,有超时的,链接不到图片的,连接不到服务器等等,很多人经常忘 ...

  10. 什么是微服务架构，.netCore微服务选型

    什么是微服务架构,.netCore微服务选型 https://www.cnblogs.com/uglyman/p/9182485.html 开发工具:VS2017 .Net Core 2.1 什么是微 ...