• 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>
  • 相关阅读:
    谈To B产品路径逻辑:To B产品的核心本质到底是什么?
    做产品应该遵循哪些宏观产品原则?
    做产品应该遵循哪些微观产品原则?
    B端产品的第一性原理思考
    美团点评王慧文:互联网有AB面,最惨烈战争发生在B2
    《罗振宇 知识就是力量》
    生活是一只龙虾
    CAD-美的热水器F50-32DQ
    CAD-椭圆和圆弧命令
    CAD-圆命令
  • 原文地址:https://www.cnblogs.com/yyKong/p/11083177.html
Copyright © 2020-2023  润新知