[Vuejs]-Don't let a user to use same item for different select inputs

by

0👍

✅

You could do something like this

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

Select input:

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

Leave a comment