选项更改时如何清除与选择一起使用的 v-model

Question

我有一个级联选择（两部分选择），其中第二个下拉列表中的选项由第一个下拉列表的值决定。我通过拥有一个基于第一个选择的计算属性来做到这一点。然后将选项提供给第二个选择。这主要工作正常。

我遇到的问题是，如果我在第二个选择中选择了一个选项（通过 v-model 设置 Vue 中绑定变量的值），然后我更改了第一个选择的值。第二个选择的选项然后更新，在那个第二个选择中我似乎被选为空选项。但是，绑定变量仍然具有先前选择的值。我假设这是因为更新第二个选择的选项值实际上不会触发输入或更改事件，因此 v-model 不会响应任何内容。我想我可以用一个观察者来解决这个问题，但我希望有一个更优雅的解决方案。

编码示例在这里： https ://codepen.io/Slotheroo/pen/ajwNKO/

JS/视图：

 new Vue({
  el: '#app',
  data: {
    selectedFruit: null,
    selectedVariety: null,
    fruits: {
      "apples": [
        {
          name: "honeycrisp",
          madeBy: "applebees",
        },
        {
          name: "macintosh",
          madeBy: "the steves",
        },
        {
          name: "gala",
          madeBy: "ac/dc",
        },
        {
          name: "pink lady",
          madeBy: "Alecia Beth Moore",
        },
      ],
      "pears": [
        {
          name: "d'anjou",
          madeBy: "Maya D'Anjoulou",
        },
        {
          name: "bartlett",
          madeBy: "Anton Yelchin",
        }
      ],
    },
  },
  computed: {
    fruitVarieties: function() {
      return this.fruits[this.selectedFruit]
    }
  },
});

HTML:

 <div id="app">
  <div>
    <select v-model="selectedFruit">
      <option value=""></option>
      <option v-for="fruitName in Object.keys(fruits)" :value ="fruitName">{{fruitName}}</option>
    </select>
  </div>
  <select v-model="selectedVariety">
      <option value=""></option>
      <option v-for="fruitVariety in fruitVarieties" :value="fruitVariety">{{ fruitVariety.name }}</option>
    </select>
  <div>
  </div>
  <p>Selected variety: {{ selectedVariety }}</p>
</div>

重现步骤：

1. 在第一个选择中选择“苹果”
2. 在第二个选择中选择’honeycrisp’
3. 在第一个选择中选择“梨”或“空白”

希望的结果

selectedVariety 返回 null

实际结果

selectedVariety 仍然等于 honeycrisp

原文由 Slotheroo 发布，翻译遵循 CC BY-SA 4.0 许可协议

Answer 1

我会向第一个 <select> 添加一个 更改 处理程序，以在选择更改时清空 selectedVariety …

 <select v-model="selectedFruit" @change="selectedVariety = null">

https://codepen.io/anon/pen/JByEwy

---

另一种选择是在 selectedFruit 上添加 _监视_，但 Vue 通常建议使用事件处理程序。

原文由 Phil 发布，翻译遵循 CC BY-SA 4.0 许可协议

Answer 2

如果您使用的是 version 3.0.0 ，则 :reset-on-options-change='true' 有一些功能

例如

<v-select required  :options="filterKaryawan.unit.options" :reset-on-options-change='true' v-model="filterKaryawan.unit.selected" placeholder="placeholder" >
   <template #search="{attributes, events}">
       <input
           class="vs__search"
            v-bind="attributes"
            v-on="events"
            :required="filterKaryawan.unit.selected"
       />
   </template>
</v-select>

原文由 Akbar Noto 发布，翻译遵循 CC BY-SA 4.0 许可协议