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

Question

我有一个级联选择（两部分选择），其中第二个下拉列表中的选项由第一个下拉列表的值确定。我通过具有基于第一个选择的计算属性来做到这一点。然后将选项输入到第二个选择中。这大多工作得很好。

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

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

JS/Vue：

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

实际结果

选择的品种仍然等于蜜脆

Answer 1

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

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

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

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