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

我在使用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. 解决 Ajax 发送 post 请求出现 403 Forbidden 的三种方式

    众所周知前端向后台发送 post 请求时,必须验证 csrf,否则会报错 403 Forbidden.使用 Django Form 表单可以直接在表单里面添加 {% csrf_token %} 即可, ...

  2. Linear Algebra - Determinant（基础）

    1. 行列式的定义 一阶行列式: \[ \begin{vmatrix} a_1 \end{vmatrix} = a_1 \] 二阶行列式: \[ \begin{vmatrix} a_{11} & ...

  3. 简单的GTK窗体搭建

    #include<gtk/gtk.h> //必须引用gtk/gtk.h这个头文件 2 int main(int argc,char *argv[]) //标准c语言主函数的声明 3 { 4 ...

  4. 痞子衡嵌入式：微处理器CPU性能测试基准(Dhrystone)

    大家好,我是痞子衡,是正经搞技术的痞子.今天痞子衡给大家介绍的是微处理器CPU性能测试基准Dhrystone. 在嵌入式系统行业用于评价CPU性能指标的标准主要有三种:Dhrystone.MIPS.C ...

  5. Each record in table should have a unique `key` prop,or set `rowKey` to an unique primary key.

    Each record in table should have a unique `key` prop,or set `rowKey` to an unique primary key. 1.rea ...

  6. 最优化理论-Simplex线性规划

     Sorry,各位,现在这里面啥也没,之所以开这篇文章,是防止以后用得到:现在研究这些,总感觉有些不合适,本人还不到那个层次:如果之后有机会继续研究simplex-线性规划问题,再回来参考下面的链接进 ...

  7. spring boot 启动报：Composite-id class must implement Serializable: xxx错误

    问题 在对spring boot项目进行修改后,重新启动时报如下错误: Composite-id class must implement Serializable: xxx xxx为具体的类 原因 ...

  8. 修正linux系统时间

    date 安装ntpdate工具# yum -y install ntp ntpdate 设置系统时间与网络时间同步# ntpdate cn.pool.ntp.org 将系统时间写入硬件时间# hwc ...

  9. build spark

    Error : Failed to find Spark jars directory (/home/pl62716/spark-2.2.0-SNAPSHOT/assembly/target/scal ...

  10. Linux上常用命令整理（二）—— paste

    上一篇整理了cat指令的几个基本常见用法,这次整理一下paste指令的基本用法. cat paste cut grep paste paste可以简单的理解为把两个文件的内容按列合并,与cat命令直接 ...