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