在Vue中删除当前选项时，将所选值更改为null

Question

我有两个链接的选择，允许用户选择第一个选项（这是“您已经拥有的”），然后将该选项从另一个选择中排除（您可以将其视为“您想要的”） “）。

这是我当前的代码：

var linkedSelects = new Vue({
  el: '#linked-selects',
  data: {
    opt1: null,
    opt2: null,
    options: ['a', 'b', 'c', 'd']
  },
  computed: {
    allOptions() {
      const allOptions = [...this.options];
      
      allOptions.push('other');
      
      return allOptions;
    },
    remainingOptions() {
      const remainingOptions = [...this.options];
      
      remainingOptions.push('any');
      
      const opt1Index = remainingOptions.indexOf(this.opt1);
      
      if (-1 < opt1Index)
        remainingOptions.splice(opt1Index, 1);
        
      return remainingOptions;
    }
  }
})

<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.17/vue.js"></script>

<div id="linked-selects">
  <div>
  Choose what to exclude:
    <select v-model="opt1">
      <option
        v-for="opt in allOptions" 
        :value="opt" 
        :key="opt" >
          {{opt}}
      </option>
    </select>
  </div>

  <div>
    Select out of the remaining:
    <select v-model="opt2">
      <option
        v-for="opt in remainingOptions" 
        :value="opt" 
        :key="opt" >
          {{opt}}
      </option>
    </select>
  </div>
  
  <div>Value 1: {{opt1}}</div>
  <div>Value 2: {{opt2}}</div>
</div>

按以下顺序进行操作时会出现问题：

1. 用户在第二个选择中选择一个选项（例如a）。
2. 用户在第一次选择时选择了相同的选项（a）。

完成此操作后，选项a从第二个选择中删除，但opt2的值仍等于a。在那种情况下，如何使Vue更改为null？

解决此问题的特别需要是因为我正在使用Buefy，并将opt2保留为不存在的选项会使选择显示为空而不是显示占位符。要查看占位符，必须将选项更改为null。

Answer 1

您可以在opt1上添加观察者。如果其值与opt2相同，请将opt2重置为null：

watch: {
  opt1(value) {
    this.opt2 = value === this.opt2 && null
  }
}