How to implement the select all function in vue.js-Vue.js-php.cn

How to implement the select all function in vue.js

王林

Release： 2021-10-12 17:48:03

Original

4525 people have browsed it

Vue.js method to implement the select-all function: use ordinary event listening methods to process data status, such as [var list = [{title : 'data one',checked : false,},{title : ' Data two',checked: },{title...].

How to implement the select all function in vue.js

The operating environment of this article: windows10 system, vue.js 2.9, thinkpad t480 computer.

In actual projects, we can use the following two methods to implement the all-select function, as follows:

Method 1: Fully utilize the characteristics of vuejs, and use computed to implement single selection Real-time monitoring of buttons.

<div id="app">
    <div class="box">
        <div class="title">
            <label><input type="checkbox" v-model="status">全选</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 : &#39;数据一&#39;,
        checked : false,
    },{
        title : &#39;数据二&#39;,
        checked : true,
    },{
        title : &#39;数据三&#39;,
        checked : true,
    },{
        title : &#39;数据四&#39;,
        checked : true,
    },{
        title : &#39;数据五&#39;,
        checked : true,
}];
 
var vm = new Vue({
    el : &#39;#app&#39;,
    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;
                });
            }
        }
    }
});

Copy after login

Method 2: Use ordinary event listening methods to process data status

<div id="app">
    <div class="box">
        <div class="title"><label>
        <input type="checkbox" 
            v-model="status" 
            @change="allCheck">全选</label></div>
        <ul>
            <li v-for="item,index of list">
                <label><input type="checkbox" 
                v-model="item.checked" 
                @change="singleCheck">{{item.title}}</label></li>
        </ul>
    </div>
</div>
var list = [
    {
        title : &#39;数据一&#39;,
        checked : false,
    },{
        title : &#39;数据二&#39;,
        checked : true,
    },{
        title : &#39;数据三&#39;,
        checked : true,
    },{
        title : &#39;数据四&#39;,
        checked : true,
    },{
        title : &#39;数据五&#39;,
        checked : true,
}];
 
var vm = new Vue({
    el : &#39;#app&#39;,
    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
        }
    }
});

Copy after login

Explain that in method 2, the event listening function is used, change is used, and click can also be used. When using the click event , there is a bug in the lower version of vuejs, the bug is fixed in the higher version, the bug exists in the lag after using the click data state when the two-way binding state changes.

Recommended learning: php training

The above is the detailed content of How to implement the select all function in vue.js. For more information, please follow other related articles on the PHP Chinese website!