如何根据VUE JS JavaScript中的价值更新下拉菜单？

Question

目前，我的网站上有两个下拉菜单。一个用于访问类型下拉菜单，由医疗和牙科组成，一个用于诊所列表下拉菜单，包括诊所A，诊所B，诊所

C。例如诊所A是牙科，诊所B是牙科，诊所C是医疗）

b） b）用户选择诊所，访问类型下拉菜单将更新为dental。

c）如果用户选择诊所C，则访问类型下拉菜单将更新为Medical。

但是，我现在面临的当前问题是，如果用户选择访问类型下拉菜单为 牙齿，应该指诊所A，反之亦然。但是，如果我首先选择“访问类型”下拉菜单作为牙科菜单，则诊所清单不会更新，并且在诊所清单输入字段中没有值。 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>