vue uses checkbox in vant for all selection

In this paper, we share the specific code of vue using checkbox in vant to realize the full selection function for your reference. The specific contents are as follows

<template>
 <div class="visiblePeople">
 <topbar />
 <ul class="list clear_float">
 <li v-for="(item, index) in people" :key="index">
 <van-checkbox
  v-model="item.flag"
  class="listli"
 ></van-checkbox>
 <div class="right">
  <p>{{ item.name }}</p>
  <p>{{ item.id }}</p>
 </div>
 </li>
 </ul>
 <div class="bottom">
 <div class="left">
 <van-checkbox v-model="allcheck" class="all"> All selection </van-checkbox>
 </div>
 <button @click="jump"> Determine </button>
 </div>
 </div>
</template>
 
<script>
export default {
 data() {
 return {
 people: [
 { id: "002", name: " Chen Yang ", flag: true },
 {
  id: "003",
  name: " Wang Miaomiao ",
  flag: true,
 },
 {
  id: "004",
  name: " Zhang Liangjun ",
  flag: true,
 },
 {
  id: "005",
  name: " Liu Lu ",
  flag: true,
 },
 ],
 };
 },
 methods: {
 // Click OK to jump back to the new contract page 
 jump() {
 this.$router.push("/addContract");
 },
 // Radio button toggle 
 // change(index) {
 // this.people[index].flag = !this.people[index].flag;
 // console.log(this.people[index].flag);
 // },
 },
 computed:{
 allcheck:{
 get(){
 // Value 
 //every Method, every 1 Items are satisfied 1 Criteria return true
 return this.people.every(item=>item.flag)
 },
 set(newValue){
 // Setting value 
 console.log(' Trigger set Method ')
 this.people.map(item=>item.flag=newValue)
 }
 },
 filterAll(){
 return this.people.filter(item=>item.flag).length
 },
 count(){
 let checkedList=this.people.filter(item=>item.flag)
 return checkedList.length.reduce((total,item)=>{
 return total+item.num
 },0)
 }
 }
};
</script>
<style lang="less" scoped>
.list {
 background: #f8f9fb;
 height: 574px;
 li {
 height: 56px;
 margin: 10px 0 10px 0;
 float: left;
 img {
 width: 19px;
 height: 19px;
 float: left;
 margin: 13px;
 &.on {
 display: block;
 }
 &.off {
 display: none;
 }
 }
 .listli {
 float: left;
 margin: 19px 13px 0 13px;
 }
 .right {
 float: left;
 background: #ffffff;
 width: 328px;
 height: 56px;
 padding: 0px 0 0 13px;
 box-sizing: border-box;
 p:nth-of-type(1) {
 font-size: 15px;
 font-family: PingFang SC;
 font-weight: 400;
 color: #000000;
 line-height: 29px;
 }
 p:nth-of-type(2) {
 font-size: 13px;
 font-family: PingFang SC;
 font-weight: 400;
 color: #666666;
 line-height: 14px;
 }
 }
 }
}
.bottom {
 height: 50px;
 position: fixed;
 bottom: 0;
 .left {
 width: 237px;
 background: #ffffff;
 height: 100%;
 float: left;
 img {
 width: 18px;
 float: left;
 margin: 18px 13px 0 18px;
 &.on {
 display: block;
 }
 &.off {
 display: none;
 }
 }
 .all {
 margin: 17px 0 0 14px;
 }
 p {
 float: left;
 font-size: 13px;
 font-family: PingFang SC;
 font-weight: 400;
 color: #333333;
 margin-top: 18px;
 }
 }
 button {
 float: left;
 width: 138px;
 height: 50px;
 line-height: 50px;
 background: #336afa;
 color: #ffffff;
 }
}
</style> 

The problem encountered this time is that I didn't find it in the people array at the beginning of 1, and the value setting type of every defined flag is string type, that is, flag= "true", which leads to the fact that 1 starts to enter the page, regardless of whether the value is true or false, and the check box is selected. After modification, there is no such problem.

For the vue. js component tutorial, please click on the topic vue. js component learning tutorial to learn.

For more vue learning tutorials, please read the special topic "vue Practical Tutorial"