javascript - VueJs 中的过滤器

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，然后尝试在 computed property 中使用 client = 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}))
    }
},

然后我将它放在 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