我試圖復制一個Vue組件，它是一個專案串列，每個專案包含一個下拉和一個洗掉按鈕。將有一個 "添加 "按鈕為串列添加新的專案，這在下面的片段中有所描述。
我們的要求是，當用戶選擇一個選項時，該選項將不能用于（或移除）任何其他專案。換句話說，選定的選項值不應該被重復。這與這個問題中的想法很相似（jQuery 防止多個下拉選單中的重復選擇）
。當用戶重新選擇或洗掉一個專案時，附加在該專案上的所選選項應再次被添加到 "可用 "串列中。因此，該選項串列是 "反應式 "和動態的。
例如，對于第一個專案，如果我選擇 "選項1"。當點擊 "添加新專案 "時，"選項1 "不應該出現在選項串列中。而如果第一個專案被洗掉，"選項1 "將再次被選中，等等。.
這就是我目前得到的，這個想法是：option將存盤所有的選項資料，selectedValueArray將負責存盤每個專案的選擇的選項值，而selectableOptions陣列將等于options集減去selectedValueArray。通過與專案的互動（改變選項，洗掉），selectedValueArray和selectableOptions陣列將被相應改變。
我可以用JavaScript做這個。但是我是Vue的新手，不知道如何在Vue中有效地做到這一點。我創建的片段的問題是，由于可用的選項來自selectableOptions陣列，所以當一個專案從selectableOptions中移除時，它也將影響到所選的選項。(例如：如果 "選項1 "從這個陣列中被移除，那么第一項的下拉選單將是空白的，因為 "選項1 "已經從可選擇串列中被移除）。) 感謝任何幫助。
var app = new Vue（{
el: "#app"/span>,
data: {
options: [],
items: [],
selectableOptions: [],
selectedValueArray: [],
},
mounted（） {
this.options = [
{
name: "選項1"。
value: 1,
},
{
name: "選項2"。
value: 2,
},
{
name: "選項3"。
value: 3,
},
{
name: "選項4"。
value: 4,
},
{
name: "選項5"。
value: 5,
},
{
name: "選項6"。
value: 6,
}
];
this.selectableOptions = this.options;
},
methods: {
addItem: function () {
this.items.push（{
'value': 0.
});
},
removeItem: function (index) {
this.$delete(this.items, index) 。
},
changeOption: function () {
this.selectedValueArray = [] 。
for (let i = 0; i < this. items.length; i ) {
let selectedValue = this.items[i].value。
this.selectedValueArray.push（selectedValue）。
}
this.selectableOptions = this.options.filter (
option => {
return this.selectedValueArray. indexOf(option.value) == -1;
})
},
},
})<script src="https://cdnjs. cloudflare.com/ajax/libs/vue/2.5.17/vue.js"></script>/span>
<div id="app">/span>
<div v-for="(item, index) in items"/span>>
<select。
v-model="item.value">
<option v-for="(option) in selectableOptions" :value="option. value">{{option.name}}</option>
</select>/span>
<button @click="removeItem（index）"> 移除這個專案</button>>
</div>/span>
<button @click="addItem" > 添加新專案</按鈕>
</div>uj5u.com熱心網友回復：
如果你想簡單地禁用一個選項，其值存在于物件的items陣列中（你將其用于v-model指令系結，因此它反映了用戶選擇的 "活 "的選擇集），那么這只是一個使用方法來回傳禁用狀態的問題：
<option v-for="(option) in options" :value="option.value" v-bind:disabled="isDisabled(option)">{{option.name}}</option>
然后，你可以定義一個isDisabled(option)方法，該方法回傳一個布林值，以指示給定的option的值是否已經存在于你的陣列中：
isDisabled: function(option) {
return this.items.map(item => item.value).including(option.value)。
}
請看下面的例子證明：
。var app = new Vue({
el: "#app"/span>,
data: {
options: [],
items: [],
selectedValueArray: [],
},
mounted（）{
this.options = [{
name: "選項1"/span>,
value: 1,
},
{
name: "選項2"。
value: 2,
},
{
name: "選項3"。
value: 3,
},
{
name: "選項4"。
value: 4,
},
{
name: "選項5"。
value: 5,
},
{
name: "選項6"。
value: 6,
}
];
},
methods: {
addItem: function() {
this.items.push（{
'value': 0.
});
},
removeItem: function(index) {
this.$delete(this.items, index) 。
},
isDisabled: function(option) {
return this.items。 map(span class="hljs-params">item => item. value）.includes（option.value）。
}
},
})<script src="https://cdnjs. cloudflare.com/ajax/libs/vue/2.5.17/vue.js"></script>/span>
<div id="app">/span>
<div v-for="(item, index) in items"/span>>
<select v-model="item.value"/span>>
<option v-for="(option) in options" :value="option. value" v-bind:disabled="isDisabled(option)">{{option.name}}</option>
</select>/span>
<button @click="removeItem（index）"> 移除這個專案</button>>
</div>/span>
<button @click="addItem" > 添加新專案</按鈕>
</div>uj5u.com熱心網友回復：
你必須使用一個計算的屬性，來過濾可選擇的選項
像這樣{
computed: {
computedSelectable（） {
const chosenValues = this.selectedValueArray。 map((i) => i.value)。
return this.selectableOptions。 filter((item) =>。
!"selectedValues.includes(item.value)
);
},
}
轉載請註明出處，本文鏈接：https://www.uj5u.com/houduan/310009.html
標籤：
上一篇：如何在鋸齒狀的陣列中搜索