Question

我正在尝试在Vuejs 2.0中构建一个小应用程序，我正在使用v-select组件，我的数据格式是这样的：

{
    "model":
        [
            {
                "id":1,
                "salutation":"Mr",
                "first_name":"Rahul",
                "last_name":"Bashisht",
                "number":"9876521102",
                "email":"rahul@icicibank.com",
                "company":
                    {
                        "id":1,
                        "name":"ICICI Bank",
                        "is_client":1,
                    }
            },
            {
                "id":2,
                "salutation":"Mr",
                "first_name":"Vikash",
                "last_name":"Pandey",
                "number":"0987654345",
                "email":"vikash@hdfc.com",
                "company":
                    {
                        "id":2,
                        "name":"HDFC Bank",
                        "is_client":0,
                    }
            }
        ]
}

现在我将其设置为变量model，然后尝试使用client = 1中的computed property进行过滤：

contactClients: function() {
    if(this.model)
    {
        return this.model
            .filter(f => (f.company.is_client == 1))
            .map(d => ({label: d.first_name+' '+d.last_name+' - '+d.company.name, value: d.id}))
    }
},

然后我将它放在v-select选项中：

<v-select multiple :options="contactClients" v-model="clientParticipants"></v-select>

现在我有另一个v-select，它符合公司名称，但是is_client是真的，所以我正在尝试这样的事情：

我有公司的数据集：

{
    "model":
        [
            {
                "id":1,
                "name":"ICICI Bank",
                "is_client":1,
            },
            {
                "id":2,
                "name":"HDFC Bank",
                "is_client": 0,
            },
            {
                "id":3,
                "name":"BNP Paribas",
                "is_client": 0,
            }
            {
                "id":4,
                "name":"Barclays Bank",
                "is_client": 1,
            }
        ]
}

我将它放在companies变量中并将其过滤为：

clients: function () {
    if(this.companies)
    {
        return this.companies
            .filter(f => f.is_client == 1)
            .map(d => ({label: d.name, value: d.id}))
    }
}

在v-select中我有：

<v-select :options="clients" v-model="summary.client"></v-select>

我希望根据contactsClients的选择添加一个额外的过滤器，即如果在第一个列表中选择了任何contactsClients，则第二个列表应该只包含company个选项，如果第一个列表（contactClients）中没有选择，则第二个列表应该包含所有默认选项，其中包含当前情况下的简单is_client过滤器。由于contactClients中的选择是多个，所以我不知道如何过滤元素。请指导我。

修改： Codepen Link

Answer 1

可能会对你有帮助。

contactClients: function() {
  if (this.model) {
    return this.model.filter(f => f.company.is_client == 1).map(d => ({
      label: d.first_name + " " + d.last_name + " - " + d.company.name,
      value: d.id,
      companyId: d.company.id
    }));
  }
},
clients: function() {
  var self = this;
  var res = [];
  if (this.companies) {

    if (this.clientParticipants.length) {
      console.log(this.clientParticipants)
      this.clientParticipants.forEach(function(cc) {
        self.companies.forEach(function(c) {
          if (cc.companyId === c.id) {
            res.push(c);
          }
        });
      });
      return res.map(d => ({ label: d.name, value: d.id }));
    } else {
      return this.companies
        .filter(f => f.is_client == 1)
        .map(d => ({ label: d.name, value: d.id }));
    }
  }
}

示例here

Answer 2

您可以使用计算属性在那里实现过滤器逻辑并将其绑定到第二个列表。参考：https://vuejs.org/v2/guide/computed.html#Computed-Properties

在VueJs中过滤

2 个答案: