vue realizes all selection function

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

Thoughts of all selection

1. Prepare labels, styles, js and data

2. Show the data loop on the page, v-for in li

3. In the all check box v-model = "isAll"//Total status

4. Small checkbox v-model = ""//Single status

5. Small selection affects all selection... Define the calculation attribute isAll to count the status of small selection boxes, every to find the unqualified ones in the array, and directly return false... Judge the status of every small selection box, as long as there is one small selection box whose status is not true or not checked, then return false, and the status of all selection boxes is false

6. Selecting all affects small selection... set (val) sets the state of Selecting All (true/false)... Then traverse each small box to see the state of the small box and change its state to val Selecting All

<template>
  <div>
    <span> All selection :</span>
    <input type="checkbox" v-model="isAll" />
    <button @click="btn"> Reverse selection </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: " Pig 8 Precept ",
          c: false,
        },
        {
          name: " Monkey King ",
          c: false,
        },
        {
          name: " Tang's monk ",
          c: false,
        },
        {
          name: " Bai Longma ",
          c: false,
        },
      ],
    };
  },
  computed: {
    isAll: {
      // All selection affects small selection 
      set(val) {
        //set(val)  Set the status of all selection (true/ false)
        // We manually set the status of all check boxes , Object that traverses each object in the array c Attribute ,  That is, traverse to see the status of each small check box , Let its state be changed to  val  Status of all check boxes 
        this.arr.forEach((obj) => (obj.c = val));
      },
      // Small checkboxes affect all checkboxes 
      get() {
        // Determine each of the arrays 1 Object of c Attribute   Is it equal to true,  Is to judge every 1 The status of a small checkbox ,  As long as there is 1 The status of the small check boxes is not true  It's just not ticked off ,  Then go back false ,  The status of all check boxes is false
        // every Formula :  Find the array " Not conforming " Condition ,  Direct in-situ return false
        return this.arr.every((obj) => obj.c === true);
      },
    },
  },
  methods: {
    btn() {
      // Realize reverse selection 
      // Traversing each of the arrays 1 Items ,   Make the object in the array c Attribute is inverted and then assigned back 
      this.arr.forEach((obj) => (obj.c = !obj.c));
    },
  },
};
</script>