Выберите опцию другого выбора выпадающего

Question

У меня есть два списка выбора

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

Я хотел бы получить второе значение раскрывающегося списка по умолчанию при изменении параметров в первом раскрывающемся списке. Я попытался

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

, который устанавливает второй раскрывающийся список пустым при изменении значения в первом раскрывающемся списке. Но когда я использую $("#ieprokg").append("– Select –");, это не срабатывает. Как я могу установить для второго раскрывающегося списка выбранное значение = 0 при изменении значения в первом раскрывающемся списке. Спасибо.

Answer 1

Вы можете прикрепить функцию к событию change первого выбора:

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

, а затем, в экземпляре Vue, установить значение второго выбора по умолчанию, например:

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

jQuery и Vue не очень хорошо работают вместе, потому что jQuery действует непосредственно на элементы DOM, а Vue использует виртуальный DOM и решает, когда и как отразить изменения на фактическом DOM.

Answer 2

Вы можете использовать наблюдателя в Vue js, чтобы отслеживать любые изменения в v-модели вашего первого выпадающего списка, а затем вызывать необходимые изменения в наблюдателе. Просто добавьте приведенный ниже код в ваш Vue экземпляр.

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