Vue.js开发OTC交易及报价界面：实现下拉框选项互斥

针对你在OTC交易界面遇到的两个下拉框不能选相同加密货币的需求，这里有个简单且实用的方案，分两步来实现：

1. 动态过滤第二个下拉框的可选选项 #

首先我们可以通过计算属性（computed）来动态生成第二个下拉框的可选列表，自动排除第一个下拉框已经选中的选项，这样用户根本看不到重复的选项，从源头避免误选。

修改你的模板代码，把第二个v-select的:items绑定到一个计算属性上：

<v-select 
  v-model="yousendselect" 
  :items="items" 
  :rules="[v => !!v || 'Item is required']" 
  label="You send" 
  required 
></v-select>

<v-select 
  v-model="yougetselect" 
  :items="filteredGetItems" 
  :rules="[v => !!v || 'Item is required', v => v !== yousendselect || 'Cannot select the same currency as \"You send\"']" 
  label="You get" 
  required 
></v-select>

2. 补充互斥验证规则 #

为了防止一些特殊情况（比如手动修改v-model的值），我们给第二个下拉框加一条额外的验证规则，确保选中的值和第一个下拉框的选中值不重复，同时给用户明确的提示信息。

接下来在你的Vue组件的script部分添加计算属性和数据定义：

export default {
  data() {
    return {
      yousendselect: null,
      yougetselect: null,
      items: ['Bitcoin', 'Ethereum', 'Litecoin', 'Ripple']
    }
  },
  computed: {
    filteredGetItems() {
      // 过滤掉第一个下拉框已选中的选项
      return this.items.filter(item => item !== this.yousendselect)
    }
  }
}

效果说明 #

• 当你在"You send"下拉框选中某个币种后，"You get"下拉框里会自动移除这个币种，用户无法选择重复选项
• 如果通过特殊方式让两个值重复（比如控制台修改），验证规则会触发，显示错误提示

这样既从交互上避免了重复选择，又通过验证规则做了兜底，完美满足你的需求～

内容的提问来源于stack exchange，提问作者cybersch