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>

注意：您必须处理某人在第一个选择中选择一个选项，然后在第二个选择中选择选项的情况，然后选择在第一个选择中选择的选项第二选择。可能会在selectedCompanies更改时清除company_name。你可以这样做。

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

如何在vuejs

1 个答案: