The relationship between multi-select box check and select all function in Vue document

With the continuous development and advancement of front-end technology, the application of Vue framework is becoming more and more popular. In practical applications of Vue, the functions of checking multiple boxes and selecting all are often used. In the Vue documentation, the implementation methods of checking multiple selection boxes and selecting all are also very detailed.

Multi-select box in Vue

In Vue, the implementation method of multi-select box is very simple. You only need to use multi-select box where you need to use it<input type="checkbox"> is enough. When multiple options need to be selected, you only need to set the same v-model value for each option. The specific code is as follows:

<div id="app">
  <input type="checkbox" id="item1" value="item1" v-model="checkedItems">
  <label for="item1">Item 1</label>
  <br>
  <input type="checkbox" id="item2" value="item2" v-model="checkedItems">
  <label for="item2">Item 2</label>
  <br>
  <input type="checkbox" id="item3" value="item3" v-model="checkedItems">
  <label for="item3">Item 3</label>
  <br>
  <p>Checked items: {{checkedItems}}</p>
</div>

<script>
  new Vue({
    el: '#app',
    data: {
      checkedItems: []
    }
  })
</script>

In the above code, we use an array checkedItems to store the value of the selected option. When the user checks an option, the value of the option is added to the checkedItems array.

Select all function in Vue document

In the Vue document, we also provide us with a method to realize the selection of all multi-select boxes. The specific code is as follows:

<div id="app">
  <input type="checkbox" id="selectAll" v-model="allChecked" @change="checkAll">
  <label for="selectAll">Select all</label>
  <br>
  <input type="checkbox" id="item1" value="item1" v-model="checkedItems">
  <label for="item1">Item 1</label>
  <br>
  <input type="checkbox" id="item2" value="item2" v-model="checkedItems">
  <label for="item2">Item 2</label>
  <br>
  <input type="checkbox" id="item3" value="item3" v-model="checkedItems">
  <label for="item3">Item 3</label>
  <br>
  <p>Checked items: {{checkedItems}}</p>
</div>

<script>
new Vue({
  el: '#app',
  data: {
    items: ['Item 1', 'Item 2', 'Item 3'],
    checkedItems: [],
    allChecked: false
  },
  methods: {
    checkAll() {
      if (!this.allChecked) {
        this.checkedItems = this.items.slice();
      } else {
        this.checkedItems = [];
      }
    }
  }
})
</script>

In the above code, we set an allChecked variable for the all-select box to determine whether to select all. In the checkAll function, we use two branches to implement the functions of selecting all and deselecting all: when all options are selected, the all-select box is automatically checked; when any option is not selected, the all-select box Automatically becomes unselected.

The relationship between multi-select box check and select all function

When implementing the multi-select box check and select all functions in Vue, we need to pay attention to a very important issue, that is : The impact on the parent option when the child option is checked.

When all sub-options are selected, the parent option is automatically checked; when there are unselected sub-options, the parent option automatically becomes unchecked.

In order to implement this function, we can dynamically update the status of the all-selected box by monitoring changes in the checkedItems array. The specific code is as follows:

<div id="app">
  <input type="checkbox" id="selectAll" v-model="allChecked" @change="checkAll">
  <label for="selectAll">Select all</label>
  <br>
  <input type="checkbox" id="item1" value="item1" v-model="checkedItems" @change="checkParent">
  <label for="item1">Item 1</label>
  <br>
  <input type="checkbox" id="item2" value="item2" v-model="checkedItems" @change="checkParent">
  <label for="item2">Item 2</label>
  <br>
  <input type="checkbox" id="item3" value="item3" v-model="checkedItems" @change="checkParent">
  <label for="item3">Item 3</label>
  <br>
  <p>Checked items: {{checkedItems}}</p>
</div>

<script>
new Vue({
  el: '#app',
  data: {
    items: ['Item 1', 'Item 2', 'Item 3'],
    checkedItems: [],
    allChecked: false
  },
  methods: {
    checkAll() {
      if (!this.allChecked) {
        this.checkedItems = this.items.slice();
      } else {
        this.checkedItems = [];
      }
    },
    checkParent() {
      if (this.checkedItems.length === this.items.length) {
        this.allChecked = true;
      } else {
        this.allChecked = false;
      }
    }
  }
})
</script>

In the above code, we set up a checkParent function for the sub-option and added @change event listening in v-model. This function is called when a suboption is changed. In the checkParent function, we use an if-else statement to determine whether the parent option needs to be checked.

Summary

In Vue, the implementation method of checking multiple selection boxes and selecting all is very simple. You only need to use the v-model instruction and @change event monitoring. However, when implementing the impact of checking a sub-option on the parent option, we need to monitor changes in the checkedItems array to dynamically update the status of the all-selected box. For beginners, this may take some time to understand and digest. However, as long as you master this knowledge point, it becomes very simple to implement the multi-select box check and select all functions.

The above is the detailed content of The relationship between multi-select box check and select all function in Vue document. For more information, please follow other related articles on the PHP Chinese website!