Vue.js implementation of checkbox selection and inverse selection

Summary:

1, listen to the change of the value of the Select all, to change the Checbox array value

2. Listen for changes to the array values of the selected checkbox, and when a checkbox changes, determine if the value of the checkbox is the same as the length of the list data, to change the values of all selections.

Let's take a look at how this is accomplished:

First, the HTML

<template>

<table class= "Table table-bordered table-hover text-center" id= "Tabletlist" >

<thead>

<tr>

<th class= "BgColor" width= "25px" ></th>

<th class= "BgColor" > Award time </th>

<th class= "BgColor" > User id</th>

<th class= "BgColor" > User phone number </th>

<th class= "BgColor" > Prizes </th>

<th class= "BgColor" > User address </th>

<th class= "BgColor" > User name </th>

<th class= "BgColor" > Status </th>

<th class= "BgColor" > Edit </th>

</tr>

</thead>

<tbody>

<tr v-for= "(x, Index) in list" >

<td><input type= "checkbox" class= "checkbox" v-model= "x.checked" @change = "Selectsingle (index, X.userid)" ></td>

<TD v-text= "X.createtime" ></td>

<TD v-text= "X.userid" ></td>

<TD class= "Uerphone" v-text= "X.phone" ></td>

<TD class= "Awardstatus" >

<p v-text= "X.goodsname" ></p>

</td>

<TD class= "Address" v-text= "x.address" ></td>

<TD class= "UserName" v-text= "X.name" ></td>

<TD class= "Useraward" v-text= "X.awardstatusstr" ></td>

<td><a href= "javascript:;" @click = "Modify (Index)" class= "Curedit" > Modify </a></td>

</tr>

</tbody>

</table>

Second, JS

Export Default {

Data () {

Checked: [],

Allchecked:null,

checkedcount:0,

List: [],//JSON data sent back from the background

total:{

num:0,

page:0

},

},

Methods: {

Selectsingle (index, ID) {//single input Click event

Console.log (Index)

Console.log (this.list[index].checked)

this.list[index].checked ^= 1

This.list.forEach (item, i) = = {

if (Item.userid = = = ID && I!== index) {

item.checked = this.list[index].checked

this. $set (this.list, I, item)

}

})

if (this.list[index].checked = = = True) {

This.checkedcount + +

}

},

SelectAll (Event) {//Select all

This.list.forEach (item, i) = = {

if (item.checked = = = True) {

item.checked = i.checked

}

item.checked ^= 1

this. $set (this.list, I, item)

})

if (this.allchecked = = True) {

This.checkedcount = This.total.num

}else{

This.checkedcount = 0

}

},

}

}

That's all. Isn't that super simple.

Vue.js implementation of checkbox selection and inverse selection