第七色在线视频,2021少妇久久久久久久久久,亚洲欧洲精品成人久久av18,亚洲国产精品特色大片观看完整版,孙宇晨将参加特朗普的晚宴

為了賬號安全,請及時綁定郵箱和手機立即綁定
已解決430363個問題,去搜搜看,總會有你想問的

vuejs 全選

vuejs 全選

冉冉說 2019-03-22 18:19:12
使用vuejs實現(xiàn)全選功能,全選按鈕有默認(rèn)值,需要提前判斷單選按鈕的個數(shù),如果單選按鈕選全部選中,全選按鈕選中,否則不選中。<div id="app">    <div class="box">        <div class="title"><label><input type="checkbox" v-model="checkAllStatus" @click="allCheck">全選</label></div>        <ul>            <li v-for="item,index of list"><label><input type="checkbox" v-model="item.checked" >{{item.title}}</label></li>        </ul>    </div></div>var list = [    {        title : '數(shù)據(jù)一',        checked : true,    },{        title : '數(shù)據(jù)二',        checked : true,    },{        title : '數(shù)據(jù)三',        checked : true,    },{        title : '數(shù)據(jù)四',        checked : true,    },{        title : '數(shù)據(jù)五',        checked : true,}];var vm = new Vue({    el : '#app',    data : {        list:list    },    computed : {        checkAllStatus : function(){            return this.list.filter( item => item.checked ).length === this.list.length ? true : false        }    },    methods : {        allCheck : function(){            let self = this;            this.list.map(function( item ){                item.checked = self.checkAllStatus;                return item;            });        }    }});現(xiàn)在的問題是,在初始化后改變?nèi)x按鈕狀態(tài)會報錯。請問這種情況該如何處理
查看完整描述

3 回答

?
汪汪一只貓

TA貢獻1898條經(jīng)驗 獲得超8個贊

報錯的原因是,你的‘checkAllStatus’是通過computed來獲取的,但是綁定在了input里面;點擊checkbox,設(shè)置了‘checkAllStatus’的值,但是你在computed里面并沒有設(shè)置set的方法,所以導(dǎo)致報錯


只需要將全選的方法‘a(chǎn)llCheck’直接設(shè)置為‘checkAllStatus’的set方法即可;


<div id="app">

    <div class="box">

        <div class="title"><label><input type="checkbox" v-model="checkAllStatus" >全選</label></div>

        <ul>

            <li v-for="item,index of list"><label><input type="checkbox" v-model="item.checked" >{{item.title}}</label></li>

        </ul>

    </div>

</div>


<script>

    var list = [

    {

        title : '數(shù)據(jù)一',

        checked : true,

    },{

        title : '數(shù)據(jù)二',

        checked : true,

    },{

        title : '數(shù)據(jù)三',

        checked : true,

    },{

        title : '數(shù)據(jù)四',

        checked : true,

    },{

        title : '數(shù)據(jù)五',

        checked : true,

}];


var vm = new Vue({

    el : '#app',

    data : {

        list:list

    },

    computed : {

        checkAllStatus:{

            get(){

                return this.list.filter( item => item.checked ).length === this.list.length ? true : false


            },

            set(value){

                this.list.map(function( item ){

                    item.checked = value;

                    return item;

                });

            }

        }

    },

    methods : {

        

    }

});

</script>


查看完整回答
反對 回復(fù) 2019-03-26
?
四季花海

TA貢獻1811條經(jīng)驗 獲得超5個贊

親自copy代碼到本地測試
沒有報錯 功能不對而已...

查看完整回答
反對 回復(fù) 2019-03-26
  • 3 回答
  • 0 關(guān)注
  • 601 瀏覽
慕課專欄
更多

添加回答

舉報

0/150
提交
取消
微信客服

購課補貼
聯(lián)系客服咨詢優(yōu)惠詳情

幫助反饋 APP下載

慕課網(wǎng)APP
您的移動學(xué)習(xí)伙伴

公眾號

掃描二維碼
關(guān)注慕課網(wǎng)微信公眾號