如何在vuejs中切換數組中的任何元素

Question

我在Vue 2中有兩個選擇字段。兩者都具有公共名稱記錄的公用值。我使用的是vue-select組件來構建一個選擇是這樣的：

<v-select :options="companyOptions" v-model="company_name"></v-select> 

和其他選擇是這樣的：

<v-select multiple :options="companyOptions" v-model="selectedCompanies"></v-select> 

我有這樣一個計算值：

companyOptions() { 
    if(this.model.data) 
    { 
     return this.model.data.map(d => ({label: d.name, value: d.id})) 
    } 
}, 

模型數據通過axios填充。

現在，如果任何主體在第一次選擇中選擇了一個項目，那麼它應該從第二次選擇的選項中刪除該值。有人可以指導我嗎？我認爲我面臨的問題是，如果有人在第一次選擇中選擇一個項目，那麼可以通過切片數組從第二次選擇中刪除該公司，但是如果有人然後在第一次選擇中選擇不同的項目，我想要原始列表的選擇;我的意思是它應該添加以前刪除的值，並刪除新選定的值。

Answer 1

在映射之前過濾清單。

companyOptions() { 
    if(this.model.data) 
    { 
     return this.model.data 
      .map(d => ({label: d.name, value: d.id})) 
    } 
}, 
filteredCompanyOptions() { 
    if (this.model.data) 
    { 
     return this.model.data 
      .filter(f => f.name !== this.company_name.label) 
      .map(d => ({label: d.name, value: d.id}))    
    } 
} 

且模板中

<v-select multiple :options="filteredCompanyOptions" v-model="selectedCompanies"></v-select> 

注意：你將不得不處理如果有人選擇在第一選擇的選項的話，那麼選擇在第二次選擇的選項，然後挑選的在第二個選擇中選擇的第一個選擇中選擇。每當company_name更改時可能通過清除selectedCompanies。你可能會這樣做。

watch:{ 
    company_name(newValue){ 
    if (!this.selectedCompanies.length > 0){ 
     return 
    } 

    const index = this.selectedCompanies.findIndex(v => v.value == newValue.value) 
    if (index >= 0) 
     this.selectedCompanies.splice(index, 1) 
    } 
}