vue menukar kotak lungsur turun pilih dan mengosongkan kotak berbilang pilihan

Dalam proses membangunkan perniagaan bahagian hadapan menggunakan rangka kerja Vue, kami sering menemui kotak lungsur pautan berbilang peringkat Pada masa ini, kami akan menggunakan elemen pilih untuk melaksanakannya. Walau bagaimanapun, dalam senario pautan berbilang peringkat, kadangkala kita perlu mengosongkan pilihan dalam kotak berbilang pilihan apabila pilihan kotak lungsur turun berubah, supaya pengguna boleh memilih semula pilihan yang berkaitan. Artikel ini akan memperkenalkan cara melaksanakan fungsi mengosongkan pilihan dalam kotak berbilang pilihan apabila pilihan kotak lungsur turun dalam Vue.

1. Analisis permintaan

Dalam projek sebenar, kami sering menghadapi keperluan perniagaan pelbagai peringkat, contohnya, kami perlu memilih negara, wilayah, bandar dan maklumat lain biasanya Gunakan elemen pilih untuk mencapai ini. Tetapi dalam senario ini, apabila kita menukar pilihan kotak drop-down peringkat atas, pilihan kotak drop-down peringkat bawah juga akan berubah, tetapi pilihan dalam kotak berbilang pilihan tidak akan dikosongkan, yang mana akan menyebabkan Pilihan tidak sepadan dengan pilihan kotak lungsur. Oleh itu, kita perlu mengosongkan pilihan dalam kotak berbilang pilih apabila pilihan kotak lungsur turun berubah, supaya pengguna boleh memilih semula pilihan yang berkaitan.

2. Penyelesaian

Dalam proses merealisasikan keperluan, kita boleh memilih untuk menggunakan atribut jam tangan vue untuk memantau perubahan nilai kotak drop-down, dan mengosongkan kotak berbilang pilih apabila nilai berubah dalam . Pelaksanaan khusus adalah seperti berikut:

Dalam templat, kita boleh mentakrifkan kotak berbilang pilihan dan kotak lungsur turun dahulu, dan mengikatnya pada pilihan dan nilai yang sepadan:

<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>

Dalam skrip, kami Dapatkan dan tetapkan kaedah perlu ditakrifkan untuk negara dan wilayah untuk mencetuskan logik mengosongkan kotak berbilang pilihan apabila nilai berubah:

<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>

Di sini kami menggunakan atribut yang dikira untuk mengira wilayah yang tersedia pilihan, dan kemudian tetapkan nilai untuk negara dan wilayah Kaedah dapatkan dan tetapkan ditakrifkan, dan logik mengosongkan kotak berbilang pilihan dicetuskan dalam kaedah yang ditetapkan. Pada masa yang sama, kami juga memantau perubahan dalam nilai negara dan wilayah dalam atribut jam tangan, dan mengosongkan pilihan wilayah dan bandar apabila nilai berubah. Akhir sekali, kami mentakrifkan kaedah clearCity dalam kaedah untuk mengosongkan pilihan bandar.

3. Ringkasan

Artikel ini memperkenalkan cara melaksanakan fungsi mengosongkan pilihan dalam kotak berbilang pilihan apabila pilihan kotak lungsur turun dalam vue. Kita boleh menggunakan atribut jam tangan vue untuk memantau perubahan nilai dan mencetuskan logik untuk mengosongkan kotak berbilang pilihan apabila ia berubah. Melalui contoh di atas, saya percaya anda telah menguasai cara melaksanakan fungsi ini dalam vue. Dalam projek sebenar, kami boleh melaraskan dan mengoptimumkan mengikut keperluan khusus untuk mencapai logik perniagaan yang lebih fleksibel dan mudah.

Atas ialah kandungan terperinci vue menukar kotak lungsur turun pilih dan mengosongkan kotak berbilang pilihan. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!