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

我在使用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. Python 绘制你想要的数学函数图形

    Python 非常热门,但除非工作需要没有刻意去了解更多,直到有个函数图要绘制,想起了它.结果发现,完全用不着明白什么是编程,就可以使用它完成很多数学函数图的绘制. 通过以下两个步骤,就可以进行数学函 ...

  2. E20190419-hm

    diagram n. 图表; 示意图; 图解; [数] 线图; contingency n. 意外事故,偶发事件; 可能性,偶然性; [审计] 意外开支; crash v. 碰撞; 使发出巨响; 暴跌 ...

  3. 51nod1205(johnson)

    题目链接:http://www.51nod.com/onlineJudge/questionCode.html#!problemId=1205 题意:中文题诶- 思路:johnson模板题 流水作业调 ...

  4. 洛谷P2016 战略游戏

    P2016 战略游戏 题目描述 Bob喜欢玩电脑游戏,特别是战略游戏.但是他经常无法找到快速玩过游戏的办法.现在他有个问题. 他要建立一个古城堡,城堡中的路形成一棵树.他要在这棵树的结点上放置最少数目 ...

  5. 洛谷P3190 [HNOI2007]神奇游乐园（插头dp）

    传送门 大概是算第一道自己做出来的插头dp? (虽然都是照着抄板子的) (虽然有个地方死活没调出来最后只能看题解才发现自己错在哪里的) 我就当你们都会插头dp了…… 因为必须得是一条路径,所以扫描线上 ...

  6. 联盟链FISCO BCOS权限控制一览

    FISCO BCOS是完全开源的联盟区块链底层技术平台,由金融区块链合作联盟(深圳)(简称金链盟)成立开源工作组通力打造.开源工作组成员包括博彦科技.华为.深证通.神州数码.四方精创.腾讯.微众银行. ...

  7. git小白的学习

    1.1 Git介绍 1.1.1 什么是Git Git是一个开源的分布式版本控制系统,可以有效.高速地处理从很小到非常大的项目版本管理.Git 是 Linus Torvalds 为了帮助管理 Linux ...

  8. 已知单链表的数据元素为整型数且递增有序，L为单链表的哨兵指针。编写算法将表中值大于X小于Y的所有结点的顺序逆置。（C语言）

    对此题目的完整示例可直接运行代码如下: #include <stdio.h> #include <stdlib.h> typedef struct LNode{ int dat ...

  9. Sass 愿景

    在最近的一个 CSS 见面会上,我向与会者提问,“有人会在日常的工作流中使用 Sass 吗?”回答结果压倒性的表示肯定——保守谨慎地使用 Sass 已经成为过去式.Sass 正迅速成长为编写 CSS ...

  10. 18.存储过程--SQL

    好文要顶: sQL存储过程的优缺点 SQL Server 存储过程 一.创建.使用存储过程 Oracle版本: CREATE PROCEDURE MailingListCount ( ListCoun ...