vuejsは全選択機能を実現

全選択機能
開発の説明

プロジェクトvuejsを使用して

を実現

プロジェクトは2つの方法で全選択機能を実現し、ソースコードを添付し、

を参照する.
方式一
方式1では,vuejsの特性を完全に発揮し,computedを用いてラジオボタンのリアルタイムモニタリングを実現した.

    

        

              
        
        

            

                {{item.title}}
            
        
    


var list = [
    {
        title : '   ',
        checked : false,
    },{
        title : '   ',
        checked : true,
    },{
        title : '   ',
        checked : true,
    },{
        title : '   ',
        checked : true,
    },{
        title : '   ',
        checked : true,
}];

var vm = new Vue({
    el : '#app',
    data:{
        list
    },
    computed:{
        status:{
            get(){
                return this.list.filter( item => item.checked ).length === this.list.length
            },
            set( value ){
                this.list.map(function( item ){
                    item.checked = value;
                    return item;
                });
            }
        }
    }
});

方式2
方式2通常のイベント傍受方式を用いてデータ状態を処理する

    

        

          
        

            

                {{item.title}}
        
    

var list = [
    {
        title : '   ',
        checked : false,
    },{
        title : '   ',
        checked : true,
    },{
        title : '   ',
        checked : true,
    },{
        title : '   ',
        checked : true,
    },{
        title : '   ',
        checked : true,
}];

var vm = new Vue({
    el : '#app',
    data : {
        list,
        status : this.list.filter( item => item.checked ).length === this.list.length ? true : false
    },
    methods : {
        allCheck(){
            this.list.map(function( item ){
                item.checked = this.status;
                return item;
            }.bind(this));
        },
        singleCheck(){
            this.status = this.list.filter( item => item.checked ).length === this.list.length ? true : false
        }
    }
});

説明方式2ではイベントリスニング関数を用い,changeを用いてもclickを用いてもよいし,clickイベントを用いた場合,低バージョンのvuejsにバグが存在し,高バージョンではバグが修復され,バグが存在し,双方向バインド状態が変化した場合にclickデータ状態を用いたヒステリシスが存在する.