亚洲在线久爱草,狠狠天天香蕉网,天天搞日日干久草,伊人亚洲日本欧美

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

vuejs 全選

vuejs 全選

冉冉說 2019-03-22 18:19:12
使用vuejs實現全選功能,全選按鈕有默認值,需要提前判斷單選按鈕的個數,如果單選按鈕選全部選中,全選按鈕選中,否則不選中。<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 : '數據一',        checked : true,    },{        title : '數據二',        checked : true,    },{        title : '數據三',        checked : true,    },{        title : '數據四',        checked : true,    },{        title : '數據五',        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;            });        }    }});現在的問題是,在初始化后改變全選按鈕狀態會報錯。請問這種情況該如何處理
查看完整描述

3 回答

?
汪汪一只貓

TA貢獻1898條經驗 獲得超8個贊

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


只需要將全選的方法‘allCheck’直接設置為‘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 : '數據一',

        checked : true,

    },{

        title : '數據二',

        checked : true,

    },{

        title : '數據三',

        checked : true,

    },{

        title : '數據四',

        checked : true,

    },{

        title : '數據五',

        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>


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

TA貢獻1811條經驗 獲得超5個贊

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

查看完整回答
反對 回復 2019-03-26
  • 3 回答
  • 0 關注
  • 602 瀏覽
慕課專欄
更多

添加回答

舉報

0/150
提交
取消
微信客服

購課補貼
聯系客服咨詢優惠詳情

幫助反饋 APP下載

慕課網APP
您的移動學習伙伴

公眾號

掃描二維碼
關注慕課網微信公眾號