Select the option of other select dropdown

Question

I have two select lists

      <select id="praparat" v-model="selectedProduct">
        <option v-for="(level1,index) in products"
                :key="index"
                :value="level1">{{level1.name}}</option>
      </select>

      <select id="ieprokg" v-model="selectedIeProKg">
        <option selected value="0">wählen</option>
        <option v-for="level1 in ieProKg"
        :value="level1">{{level1}}</option>
      </select>

I would like to get the second dropdown value to default when I change the options in first dropdown list. I have tried

$( "#praparat" ).change(function() { 
$("#ieprokg").empty();
}

which is setting the second dropdown to empty when I change the value in first dropdown. But when I use $("#ieprokg").append("– Select –"); it's not triggering. How can I set the second dropdown to selected value=0 when I change the value in first dropdown list. Thank you.

Answer 1

You can attach a function at the change event of the first select:

<select id="praparat" v-model="selectedProduct" @change="setSecondToDefault">

then, in the Vue instance, set the value of the second select to default, like this:

methods: {
  setSecondToDefault() {
    this.selectedIeProKg = 0
  }
}

jQuery and Vue don't work together very well, because jQuery acts directly on DOM elements and Vue use a virtual DOM and it decides when and how to reflect changes on the actual DOM.

Answer 2

You can use a watcher in Vue js to track any changes in the v-model of your first dropdown and then trigger the required change in the watcher. Just add the below code in your Vue Instance.

 watch: {
        'selectedProduct': function() {
         this.selectedIeProKg = 0
        }
    }