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>

 


免責聲明!

本站轉載的文章為個人學習借鑒使用,本站對版權不負任何法律責任。如果侵犯了您的隱私權益,請聯系本站郵箱yoyou2525@163.com刪除。



 
粵ICP備18138465號   © 2018-2025 CODEPRJ.COM