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

我在使用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. UniqueIdentifier 数据类型

    UniqueIdentifier 数据类型用于存储GUID的值,占用16Byte. SQL Server将UniqueIdentifier存储为16字节的二进制数值,Binary(16),按照特定的格 ...

  2. IT 面试题

    1.JDK1.X新增的功能   ==>>> 2.字符流和字节流的区别,使用场景,相关类   ==>>> 字节流与字符流 在Java.io包中操作文件内容的主要有两大 ...

  3. 洛谷P2680 运输计划（树上差分+二分）

    传送门 考虑树上乱搞 首先这是满足二分性质的,如果在某个时间可以完成工作那么比他更长的时间肯定也能完成工作 然后考虑二分,设当前答案为$mid$,如果有一条链的长度大于$mid$,那么这条链上必须得删 ...

  4. 00 | Two Sum

    Question Given an array of integers, return indices of the two numbers such that they add up to a sp ...

  5. 微信站 - 实现复制功能 clipboard

    <script src="https://cdn.bootcss.com/clipboard.js/1.5.9/clipboard.js"></script> ...

  6. Python面向对象之结构与成员

    1.面向对象结构分析: ----面相对象整体大致分为两块区域: --------第一部分:静态字段(静态变量)部分 --------第二部分:方法部分 --每个大区域可以分为多个小部分: class ...

  7. Django之Form自定义验证规则

    1.数据源无法时时更新,有两种方法 方式一:重构构造方法(推荐) 方法一:重构构造方法(推荐) class ClassesForm(Form): name = fields.CharField( re ...

  8. 长春理工大学第十四届程序设计竞赛（重现赛）F.Successione di Fixoracci

    链接:https://ac.nowcoder.com/acm/contest/912/F 题意: 动态规划(Dynamic programming,简称dp)是一种通过把原问题分解为相对简单的子问题的 ...

  9. ASM 磁盘组的的scrip

    之前经常用如下方式进行查询:步骤 1 以oracle用户登录系统.步骤 2 执行如下命令改变ORACLE_SID环境变量.$ export ORACLE_SID=+ASM1[1或者2]需要通过ps - ...

  10. RDL 数值列排序

    [注意:RDL排序要删除组内的默认排序字段] 在SSRS中排序时,如果是数值列,默认为显示成以下,会按字母的顺序排序,但并不是我们想要的结果: 怎样达到我们要的效果,按数值排序: 1.进入页面,默认排 ...