我正在使用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。
您可以做这样的事情
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>
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>