Javascript VueJs中的过滤器

我正在尝试在Vuejs 2.0中构建一个小应用程序，在这里我使用组件，我有一个类似以下内容的数据格式：

{
    "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,
                    }
            }
        ]
}

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

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

现在我将其设置为变量

model

，然后尝试在

computed property

中使用

client=1

进行过滤，如下所示：

{
    "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,
                    }
            }
        ]
}

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

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 multiple :options="contactClients" v-model="clientParticipants"></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,
                    }
            }
        ]
}

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

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>



我希望根据选择的
联系人客户
，有一个额外的过滤器，即如果在第一个列表中选择了任何
联系人客户
，则第二个列表应仅将这些
公司
作为选项，如果在第一个列表中没有选择（ContactClient）然后，第二个列表应该有所有默认选项，使用当前情况下的simple
is\u client
filter。由于
contactClients
中的选择是多个的，所以我不知道如何过滤元素。请引导我

编辑：
您可以使用computed属性在那里实现筛选逻辑，并将其绑定到第二个列表。
参考资料：
这可能会对您有所帮助

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

示例
你能提供JSFIDLE或其他什么吗？@Pradeepb请看一看：我已经在我的computed属性中创建了这些列表，选择列表是一个数组（多个），我不确定如何使用过滤器多次比较id
（cc.value==c.id）
，但联系人id和公司id都不同，它们是不一样的。那么它们之间有什么关系呢？它们之间应该有一些共同的因素可以比较，对吗？一旦你从
模型
中提取联系人，它也会在
公司
键下附带公司数据，在这里你可以看到每个联系人在
公司键
下都有公司名称和ID。不。由于您正在
ContactClient
计算值中修改它，因此它将只有
标签
和
值
。检查。我已经修改过了。是的，我理解。但核心数据集具有这些价值。我想我们可以从接触模型数据集中找到并映射值。