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

Answer 2

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