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

选择其他选择下拉菜单的选项

2 个答案: