vue使用vant中的checkbox实现全选功能

<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">全选</van-checkbox>
      </div>
      <button @click="jump">确定</button>
    </div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      people: [
        { id: "002", name: "陈阳", flag: true },
        {
          id: "003",
          name: "王苗苗",
          flag: true,
        },
        {
          id: "004",
          name: "张梁俊",
          flag: true,
        },
        {
          id: "005",
          name: "刘路",
          flag: true,
        },
      ],
    };
  },
  methods: {
    //点击确定后跳转回新增合同页面
    jump() {
      this.$router.push("/addContract");
    },
    //单选按钮切换
    // change(index) {
    //   this.people[index].flag = !this.people[index].flag;
    //   console.log(this.people[index].flag);
    // },
  },
  computed:{
    allcheck:{
      get(){
        //取值
        //every方法，数组中每一项都满足一个条件返回true
        return this.people.every(item=>item.flag)
      },
      set(newValue){
        //设置值
        console.log('触发set方法')
        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>

 

本次遇到的问题是自己一开始没发现在people数组里面，定义的每一项flag的值设置的类型为字符串型即flag="true",导致一开始进入页面全部无论值为true还是false，复选框都是选中效果，修改之后便没有了此问题。