vue switches the select drop-down box and clears the multi-select box

In the process of developing front-end business using the vue framework, we often encounter multi-level linkage drop-down boxes. At this time, we will use the select element to implement it. However, in multi-level linkage scenarios, we sometimes need to clear the options in the multi-select box when the drop-down box options change, so that the user can re-select the relevant options. This article will introduce how to implement the function of clearing the options in the multi-select box when the drop-down box options change in Vue.

1. Requirements Analysis

In actual projects, we often encounter multi-level linkage business requirements. For example, we need to select country, province, city and other information. At this time we usually Use the select element to achieve this. But in this scenario, when we change the options of the upper-level drop-down box, the options of the lower-level drop-down box will also change, but the options in the multi-select box will not be cleared, which will cause the The options do not match the drop-down box options. Therefore, we need to clear the options in the multi-select box when the drop-down box options change, so that the user can re-select the relevant options.

2. Solution

In the process of realizing the requirements, we can choose to use vue's watch attribute to monitor changes in the value of the drop-down box, and clear the multi-select box when the value changes. options in . The specific implementation is as follows:

In the template, we can first define the multi-select box and drop-down box, and bind them to the corresponding options and values:

<template>
  <div>
    <select v-model="country" @change="clearCity">
      <option value="China">中国</option>
      <option value="US">美国</option>
      <option value="Japan">日本</option>
    </select>
    <select v-model="province" @change="clearCity">
      <option v-for="p in provinces" :value="p">{{p}}</option>
    </select>
    <select multiple v-model="city">
      <option v-for="c in cities" :value="c">{{c}}</option>
    </select>
  </div>
</template>

In the script, we It is necessary to define get and set methods for country and province in order to trigger the logic of clearing the multi-select box when the value changes:

<script>
export default {
  data() {
    return {
      country: 'China',
      province: '',
      cities: [],
      provinces: {
        'China': ['北京', '上海', '广州', '深圳'],
        'US': ['纽约', '洛杉矶', '旧金山'],
        'Japan': ['东京', '大阪', '福冈']
      }
    }
  },
  computed: {
    // 根据国家选择对应的省份
    availableProvinces() {
      return this.provinces[this.country] || []
    }
  },
  watch: {
    // 监听国家变化，清空省份和城市
    country(newVal, oldVal) {
      this.province = ''
      this.cities = []
    },
    // 监听省份变化，清空城市
    province(newVal, oldVal) {
      this.cities = []
    }
  },
  methods: {
    // 清空城市选项
    clearCity() {
      this.cities = []
    }
  }
}
</script>

Here we use the computed attribute to calculate the available province options, and then for country and province The get and set methods are defined, and the logic of clearing the multi-select box is triggered in the set method. At the same time, we also monitor changes in the country and province values ​​in the watch attribute, and clear the province and city options when the values ​​change. Finally, we define the clearCity method in the method to clear the city options.

3. Summary

This article introduces how to implement the function of clearing the options in the multi-select box when the drop-down box options change in vue. We can use vue's watch attribute to monitor value changes and trigger the logic of clearing the multi-select box when it changes. Through the above example, I believe you have mastered how to implement this function in vue. In actual projects, we can adjust and optimize according to specific needs to achieve more flexible and convenient business logic.

The above is the detailed content of vue switches the select drop-down box and clears the multi-select box. For more information, please follow other related articles on the PHP Chinese website!