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

我在使用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. HDU - 3899 JLUCPC（树形dp求距离和）

    JLUCPC Dr. Skywind and Dr. Walkoncloud are planning to hold the annual JLU Collegiate Programming Co ...

  2. 洛谷P1349 广义斐波那契数列（矩阵快速幂）

    P1349 广义斐波那契数列 https://www.luogu.org/problemnew/show/P1349 题目描述 广义的斐波那契数列是指形如an=p*an-1+q*an-2的数列.今给定 ...

  3. 数据库路由中间件MyCat - 源代码篇（9）

    此文已由作者张镐薪授权网易云社区发布. 欢迎访问网易云社区,了解更多网易技术产品运营经验. 3. 连接模块 3.5 后端连接 3.5.1 后端连接获取与负载均衡 上一节我们讲了后端连接的基本建立和响应 ...

  4. hihocoder1475 数组分拆【DP+前缀和优化】

    思路: DP[ i ] 代表以 i 结尾的方案数. dp[i] += sum[i] - sum[j - 1] != 0 ? dp[j] : 0 ; 对于100%的数据,满足1<=N<=10 ...

  5. 51nod1100(计算斜率)

    题目链接:https://www.51nod.com/onlineJudge/questionCode.html#!problemId=1100 题意:中文题啦- 思路:算斜率不用多说吧?本题唯一一个 ...

  6. Php5.6.15-fpm的运行机制源码剖析

    源码版本:Php5.6.15 源码目录:sapi/fpm/fpm 说明:源码的主要功能在上面直接注解 =============>>start<<=============== ...

  7. C# File和fileinfo类

    两个类功能差不多,File是静态方法实现的,Fileinfo通过实例方法实现的: 文件操作例子: using System; using System.Collections.Generic; usi ...

  8. BZOJ 1047: [HAOI2007]理想的正方形 单调队列瞎搞

    题意很简明吧? 枚举的矩形下边界和右端点即右下角,来确定矩形位置: 每一个纵列开一个单调队列,记录从 i-n+1 行到 i 行每列的最大值和最小值,矩形下边界向下推移的时候维护一下: 然后在记录的每一 ...

  9. 洛谷1220（区间dp）

    要点 处于什么位置的题常用一个套路就是搞完\([l,r]\)以后处于0(l)或1(r)的状态,即\(dp[i][j][0/1]\). 对于此题dp意义为已经搞完\([l,r]\)的时最小的已耗电能,转 ...

  10. ORACLE索引的作用及用法

    https://blog.csdn.net/qq_34895697/article/details/52425289