Vue implements the full selection function

<template>
  <div>
    <span>Select All:</span>
    <input type="checkbox" v-model="isAll" />
    <button @click="btn">Invert</button>
    <ul>
      <li v-for="(obj, index) in arr" :key="index">
        <input type="checkbox" v-model="obj.c" />
        <span>{{ obj.name }}</span>
      </li>
    </ul>
  </div>
</template>
 
<script>
export default {
  data() {
    return {
      arr: [
        {
          name: "Zhu Bajie",
          c: false,
        },
        {
          name: "Sun Wukong",
          c: false,
        },
        {
          name: "Tang Monk",
          c: false,
        },
        {
          name: "White Dragon Horse",
          c: false,
        },
      ],
    };
  },
  computed: {
    isAll: {
      //Select all to affect the small selection set(val) {
        //set(val) sets the state of all selections (true/false)
        //We manually set the state of the full selection box, and then iterate through the c property of each object in the array, that is, iterate through the state of each small selection box and change its state to val the state of the full selection box this.arr.forEach((obj) => (obj.c = val));
      },
      //The small selection box affects the full selection box get() {
        //Judge whether the c property of each object in the array is equal to true, that is, judge the state of each small selection box. As long as the state of a small selection box is not true, it is not checked, then return false, and the state of all selection boxes is false
        // every formula: find the "not meeting" condition in the array and return false directly on the spot
        return this.arr.every((obj) => obj.c === true);
      },
    },
  },
  methods: {
    btn() {
      //Implement inverse selection//Traverse each item in the array, invert the c attribute of the object in the array and assign it back this.arr.forEach((obj) => (obj.c = !obj.c));
    },
  },
};
</script>