Question

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

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

编码示例如下：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>

复制步骤：

首先选择“苹果”
在第二个选择中选择“蜂蜜酥”
在第一个选择中选择“豌豆”或“空白”

希望获得结果

selectedVariety返回null

实际结果

selectedVariety仍然等于蜜饯

Answer 1

我将在第一个<select>中添加一个 on-change 处理程序，以在选择更改时清空selectedVariety。

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

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

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

Answer 2

computed属性实际上是watcher。因此，只需在其中输入重置值代码即可。

computed: {
    fruitVarieties: function() {
      this.selectedVariety = null; 
      return this.fruits[this.selectedFruit]
    }
}

Answer 3

如果您使用的是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>

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

3 个答案: