checkbox绑定v-for的数据

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

我在使用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>
原文地址:https://www.cnblogs.com/yyKong/p/11083177.html