选择其他选择下拉选项

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 实例中，将第二个 select 的值设置为默认值，如下所示：

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

jQuery 和 Vue 不能很好地协同工作，因为 jQuery 直接作用于 DOM 元素，而 Vue 使用虚拟 DOM，它决定何时以及如何反映实际 DOM 上的更改。

Answer 2

您可以在 Vue js 中使用观察器来跟踪第一个下拉列表的 v-model 中的任何更改，然后在观察器中触发所需的更改。 只需在您的 Vue 实例中添加以下代码即可。

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