Vue フォーム処理で複数レベルのドロップダウン ボックスのリンクを実装する方法

Vue フォーム処理でマルチレベルのドロップダウン ボックス連携を実装する方法

フロントエンド アプリケーションを開発する場合、フォームは欠かせないコンポーネントの 1 つです。フォームでは、一般的な選択入力方法として、ドロップダウン ボックスが複数レベルの選択を実装するためによく使用されます。この記事では、Vue で複数レベルのドロップダウン ボックスのリンク効果を実現する方法を説明します。

Vue では、データ バインディングを通じてドロップダウン ボックスのリンクを簡単に実現できます。まず簡単な例を見てみましょう。都市セレクターがあるとします。ユーザーは最初に州を選択し、次に選択した州に基づいて都市を選択する必要があります。私たちの目標は、ユーザーが州を選択すると、都市のドロップダウン ボックスがその州に対応する都市のリストを自動的に更新することです。

まず、Vue インスタンスのデータに州リストと都市リストを定義する必要があります。例:

data() {
  return {
    provinces: ['江苏省', '浙江省', '广东省'],
    cities: {
      '江苏省': ['南京市', '苏州市', '无锡市'],
      '浙江省': ['杭州市', '宁波市', '温州市'],
      '广东省': ['广州市', '深圳市', '珠海市']
    },
    selectedProvince: '',
    selectedCity: ''
  }
}

次に、テンプレート内の 2 つのドロップダウン ボックスを使用して、選択した州と都市を表示します。各ドロップダウン ボックスに変更イベントをバインドしており、ユーザーが州を選択すると、対応するメソッドがトリガーされて都市リストが更新されることに注意してください。

<template>
  <div>
    <select v-model="selectedProvince" @change="updateCities">
      <option v-for="province in provinces" :value="province">{{ province }}</option>
    </select>
    
    <select v-model="selectedCity">
      <option v-for="city in cities[selectedProvince]" :value="city">{{ city }}</option>
    </select>
  </div>
</template>

2 番目のドロップダウン ボックスで city[selectedProvince] を使用して都市リストを動的に取得していることに注目してください。このようにして、ユーザーが別の州を選択すると、対応する都市のリストがそれに応じて更新されます。

最後に、updateCities メソッドを実装して都市リストを更新します。このメソッドでは、selectedProvince の値に基づいて対応する都市リストを動的に取得し、selectedCity に割り当てます。コードは次のとおりです。

methods: {
  updateCities() {
    this.selectedCity = '';
    if (this.selectedProvince) {
      this.selectedCity = this.cities[this.selectedProvince][0];
    }
  }
}

このメソッドでは、まず selectedCity の値をクリアし、次に selectedProvince が空かどうかを判断します。空でない場合は、city[selectedProvince] を通じて対応する都市のリストを取得し、リストの最初の値を selectedCity に割り当てます。これで都市リストの更新は完了です。

これまでのところ、複数レベルのドロップダウン ボックスの連携効果を実現することに成功しています。ユーザーが州を選択すると、都市のドロップダウン ボックスがその州に対応する都市のリストに自動的に更新されます。

要約すると、Vue でマルチレベルのドロップダウン ボックスのリンクを実現するには、データ バインディングを通じてドロップダウン ボックスのオプションを動的に更新する必要があります。メソッド内で変更イベントをリッスンし、データを更新することで、ドロップダウン ボックスのリンク効果を簡単に実現できます。

この記事が、Vue フォーム処理における複数レベルのドロップダウン ボックスの連携を実現する際の問題の解決に役立つことを願っています。ご質問がある場合は、ディスカッション用のメッセージを残してください。

以上がVue フォーム処理で複数レベルのドロップダウン ボックスのリンクを実装する方法の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。