如何根據 VUE JS javascript 中的值更新下拉菜單？

Question

目前我的網站上有兩個下拉菜單。 一個是就診類型的下拉菜單，由醫療和牙科組成，一個是診所列表下拉菜單，由診所 A、診所 B、診所 C 組成。目前正在工作的工作流程是：

a) 用戶選擇診所列表（例如， Clinic A is dental ， Clinic B is dental ， Clinic C is medical ）

b) 用戶選擇Clinic A ，訪問類型下拉菜單將更新為dental 。

c) 如果用戶選擇Clinic C ，訪問類型下拉菜單將更新為medical 。

然而，我現在面臨的當前問題是，如果用戶選擇就診類型下拉菜單作為牙科，它應該指的是診所 A，反之亦然診所 C。但是，如果我首先選擇就診類型下拉菜單作為牙科，則診所列表未更新，並且診所列表輸入字段中沒有值。 inputs.clinic.value方法有效，但inputs.visit_type.value方法無效。 誰能幫我解決這個問題？

index.vue

watch : {
 "inputs.clinic.value": {
       handler(value) {
         if (value) {
           let clinics = this.inputs.clinic.items.filter(clinic => clinic.id == value)
           let clinic = clinics[0]

           let visit_types = this.inputs.visit_type.items.filter(visit_type => visit_type.id == clinic.panel_type)
           let visit_type = visit_types[0]
           this.$set(this.inputs.visit_type, "value", visit_type.id)
           this.$set(this.inputs.visit_type, "tmp_value", visit_type)
         }
       },
       deep: true
     },
     "inputs.visit_type.value": {
       handler(value,newValue, oldValue) {
         if (newValue) {
            this.$set(this.inputs.bill_amount, "read_only", false)
            this.$set(this.inputs.bill_amount, "disabled", false)

            if (newValue != oldValue) {
              this.resetBalanceInput()
              this.updateBalanceInput()
            }
         }
         if(value){
          let visit_types = this.inputs.visit_type.items.filter(visit_type => visit_type.id == value)
          let visit_type = visit_types[0]

          let clinics = this.inputs.clinic.items.filter(clinic => clinic.id == visit_type.panel_type)
          let clinic = clinics[0]

          this.$set(this.inputs.clinic,"value",clinic.id)
          this.$set(this.inputs.clinic,"tmp_value",clinic.panel_type)
         }
       },
       deep: true
     },
}

Answer 1

您可以通過使用@change事件更新下拉選項來簡單地實現這一點。

現場演示：

 new Vue({ el: '#app', data: { visits: [{ visitType: 'dental', clinic: ['Clinic A', 'Clinic B'] }, { visitType: 'medical', clinic: ['Clinic C'] }], visitData: [], clinicData: [], selectedVisit: null, selectedClinic: null }, mounted() { this.visits.forEach((obj, index) => { this.visitData.push(obj.visitType); obj.clinic.forEach(c => { this.clinicData.push(c) }); }); }, methods: { updateClinicDropdown() { this.clinicData = this.visits .find(({ visitType }) => this.selectedVisit === visitType).clinic; }, updateVisitDropdown() { this.visitData = this.visits .filter(({ clinic }) => clinic.includes(this.selectedClinic)).map(d => d.visitType); } } })

 <script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.17/vue.js"></script> <div id="app"> <label>Select Visit Type :</label> <select v-model="selectedVisit" @change="updateClinicDropdown"> <option v-for="(visit, index) in visitData" :key="index" :value="visit">{{ visit }} </option> </select> <br><br> <label>Select Clinic :</label> <select v-model="selectedClinic" @change="updateVisitDropdown"> <option v-for="(clinic, index) in clinicData" :key="index" :value="clinic">{{ clinic }} </option> </select> </div>