vue は選択ドロップダウン ボックスを切り替え、複数選択ボックスをクリアします

vue フレームワークを使用してフロントエンド業務を開発する過程で、多階層連携のドロップダウン ボックスに遭遇することがよくありますが、今回は select 要素を使用して実装します。ただし、複数レベルのリンク シナリオでは、ドロップダウン ボックスのオプションが変更されたときに、ユーザーが関連するオプションを再選択できるように、複数選択ボックスのオプションをクリアする必要がある場合があります。この記事では、Vue でドロップダウン ボックスのオプションが変更されたときに、複数選択ボックスのオプションをクリアする機能を実装する方法を紹介します。

1. 要件分析

実際のプロジェクトでは、国、県、都市などの情報を選択する必要があるなど、複数レベルの連携ビジネス要件に遭遇することがよくあります。通常、これを実現するには select 要素を使用します。ただし、このシナリオでは、上位レベルのドロップダウン ボックスのオプションを変更すると、下位レベルのドロップダウン ボックスのオプションも変更されますが、複数選択ボックスのオプションはクリアされません。オプションがドロップダウン ボックスのオプションと一致しません。したがって、ドロップダウン ボックスのオプションが変更されたときに、ユーザーが関連するオプションを再選択できるように、複数選択ボックスのオプションをクリアする必要があります。

2. 解決策

要件を実現する過程で、vue の watch 属性を使用してドロップダウン ボックスの値の変化を監視し、複数選択をクリアすることを選択できます。値が変更されたときのボックス。 のオプション。具体的な実装は次のとおりです:

テンプレートでは、まず複数選択ボックスとドロップダウン ボックスを定義し、それらを対応するオプションと値にバインドします:

<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値が変更されたときに複数選択ボックスをクリアするロジックをトリガーするには、国と州の get メソッドと set メソッドを定義する必要があります。

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

ここでは、計算された属性を使用して計算します。利用可能な州のオプション、次に国と州の get メソッドと set メソッドが定義され、複数選択ボックスをクリアするロジックが set メソッドでトリガーされます。同時に、watch 属性の国と地方の値の変化も監視し、値が変化した場合は地方と都市のオプションをクリアします。最後に、都市のオプションをクリアするために、メソッド内で clearCity メソッドを定義します。

3. まとめ

この記事では、vue でドロップダウン ボックスのオプションが変更されたときに、複数選択ボックスのオプションをクリアする機能を実装する方法を紹介します。 vue の watch 属性を使用して、値の変更を監視し、値が変更されたときに複数選択ボックスをクリアするロジックをトリガーできます。上記の例を通じて、この関数を vue で実装する方法を習得できたと思います。実際のプロジェクトでは、特定のニーズに応じて調整および最適化することで、より柔軟で便利なビジネス ロジックを実現できます。

以上がvue は選択ドロップダウン ボックスを切り替え、複数選択ボックスをクリアしますの詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。