CODEWITHSUNDEEP
javascriptvue.jsvuejs2
Gavin Teo Juen
Gavin Teo Juen

Reputation: 320

How to update dropdown menus based on value in VUE JS javascript?

Currently i have two dropdown menus in my website. One is for visit type dropdown menu which consisted of medical and dental and one is for clinic list dropdown menu which consisted of Clinic A, Clinic B, Clinic C. The current workflow which are working right now are :

a) User selects Clinic List (eg.Clinic A is dental, Clinic B is dental ,and Clinic C is medical)

b) User Selects Clinic A , the visit type dropdown menu will be updated to dental.

c) If user selects Clinic C, the visit type dropdown menu will be updated to medical.

However the current problem I am facing right now is if the user select visit type dropdown menu as dental , it should be referring to Clinic A and vice versa for Clinic C. However , if I select the visit type dropdown menu first as dental, the clinic list is not updated and there is no values in the clinic list input field. The inputs.clinic.value method is working but for the inputs.visit_type.value method is not working . Could anyone help me to solve this ?

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

Upvotes: 0

Views: 468

Answers (1)

Rohìt Jíndal
Rohìt Jíndal

Reputation: 27192

You can simply achieve this by updating the dropdown options by using the @change event.

Live Demo :

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>

Upvotes: 1

Related Questions