如何在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) 
    } 
}