[Vuejs]-How can I reset child select box once change the parent one? [Vue]

by

1👍

As you are using Vue, You can achieve that without using JQuery. It’s not a good practice to use jQuery for DOM manipulations we are already working with JavaScript framework/libraries.

I just created a working demo :

Vue.component('combo_b', {
  props: ['data'],
  template: `<select>
    <option v-for="(item, index) in data" :key="index" :value="item">{{ item }}</option>
  </select>`
});

var app = new Vue({
  el: '#app',
  data: {
        combo_a: 'A',
      comboBData: ['C', 'D']
  },
  methods: {
    getOtherComboData: function() {
      this.comboBData = (this.combo_a === 'A') ? ['C', 'D'] : ['E', 'F']
    }
  }
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.17/vue.js"></script>
<div id="app">
  <label> Parent :
  <select v-model="combo_a" @change="getOtherComboData">
    <option value="A">A</option>
    <option value="B">B</option>
  </select>
  </label><br><br>
  <label> Child :
  <combo_b :data="comboBData"/>
  </label>
</div>
👤Debug Diva

Leave a comment