computed 案例-全选影响小选

案例-全选影响小选

目标: 全选影响小选

• 需求1: 获取到全选状态 – 改装isAll计算属性
• 需求2: 全选状态同步给所有小选框

分析:

①: isAll改成完整写法, set里获取到全选框, 勾选的状态值

②: 遍历数据数组, 赋给所有小选框v-model关联的属性

图示:

<template>
  <div>
    <span>全选:</span>
    <input v-model="isAll" type="checkbox"/>
    <button>反选</button>
    <ul>
      <li v-for="item in arr" :key="item.name">
        <input v-model="item.c" type="checkbox"/>
        <span>{{item.name}}</span>
      </li>
    </ul>
  </div>
</template>

<script>
export default {
  data() {
    return {
      arr: [
        {
          name: "猪八戒",
          c: false,
        },
        {
          name: "孙悟空",
          c: false,
        },
        {
          name: "唐僧",
          c: false,
        },
        {
          name: "白龙马",
          c: false,
        },
      ],
    };
  },
  computed: {
    //   isAll (){
    //       // every() 方法测试一个数组内的所有元素是否都能通过某个指定函数的测试
    //     // 他返回一个布尔值
    //     // 每一个都能通过测试函数，返回true
    //     // 碰到没通过测试函数的，就返回false，并停止
    //       return this.arr.every(item => item.c === true)
    //   }
    isAll:{
        set(val){
        // console.log("你修改了isAll的值  ",val);
        this.arr.forEach(item => item.c = val)
        },
        get(){
            return this.arr.every(item => item.c === true)
        }
    }
  }

};
</script>