不要让用户对不同的选择输入使用相同的项目答案

【问题标题】：Don't let a user to use same item for different select inputs不要让用户对不同的选择输入使用相同的项目
【发布时间】：2020-05-30 11:07:31
【问题描述】：

我正在使用Vue.js 开发一个OTC 交易界面和一个报价请求界面。我的目标是不要让用户对两个不同的选择输入使用相同的item。

选择输入：

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

选择输入 2：

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

项目：

items: [
 'Bitcoin',
 'Ethereum',
 'Litecoin',
 'Ripple',
],

如果用户为v-model="yousendselect" 选择比特币，用户将无法为v-model="yougetselect" 选择比特币。

【问题讨论】：

标签： vue.js

【解决方案1】：

你可以这样做

computed: {
  itemsYouSend() {
    return this.item.filter(s => s !== this.yousendget)
  },
  itemsYouGet() {
    return this.item.filter(s => s !== this.yousendselect)
  }
}

选择输入：

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

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

【讨论】：

您好，添加到<script> 后答案无效，我更新了答案（添加的项目），这可能会有所帮助。
您需要将其添加到计算属性中：参见vuejs.org/v2/guide/computed.html

【解决方案2】：

new Vue({
  el: '#app',
  template: `
    <div>
      <h2>Send</h2>
      <select v-model="yousendselect">
        <option :value="undefined">---</option>
        <option v-for="item in itemForSendSelect" :key="item" :value="item">{{ item }}</option>
      </select>
      <h2>Get</h2>
      <select v-model="yougetselect">
        <option :value="undefined">---</option>
        <option v-for="item in itemForGetSelect" :key="item" :value="item">{{ item }}</option>
      </select>
    </div>
  `,
  data() {
    return {
      items: [
        "Bitcoin",
        "Ethereum",
        "Litecoin",
        "Ripple",
      ],
      yousendselect: undefined,
      yougetselect: undefined,
    };
  },
  computed: {
    itemForSendSelect() {
      return this.items.filter(i => i !== this.yougetselect);
    },
    
    itemForGetSelect() {
      return this.items.filter(i => i !== this.yousendselect);
    },
  },
})

<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.16/vue.js"></script>
<div id="app"></div>

【讨论】：