不允许用户将相同的项目用于不同的选择输入

问题描述 投票:0回答:2

我正在使用Vue.js开发一个OTC交易接口和一个报价接口的请求。我的目标是不要让用户将相同的item用于两个不同的select input

选择输入:

<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"选择Bitcoin,则用户将无法为v-model="yougetselect"选择Bitcoin

vue.js
2个回答
0
投票

您可以做这样的事情

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>

0
投票

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>
© www.soinside.com 2019 - 2024. All rights reserved.