title: Filters in VueJs
body: <p>I'm trying to build a small application in Vuejs 2.0, where I'm using <a href="https://github.com/sagalbot/vue-select" rel="nofollow noreferrer">v-select</a> component, I'm having a data format something like this:</p>
  
  <pre><code>{
      "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,
                      }
              }
          ]
  }
  </code></pre>
  
  <p>Now I'm setting this to a variable <code>model</code> and then trying to filter with <code>client = 1</code> in <code>computed property</code> something like this:</p>
  
  <pre><code>contactClients: function() {
      if(this.model)
      {
          return this.model
              .filter(f =&gt; (f.company.is_client == 1))
              .map(d =&gt; ({label: d.first_name+' '+d.last_name+' - '+d.company.name, value: d.id}))
      }
  },
  </code></pre>
  
  <p>Then I'm placing it in v-select options as:</p>
  
  <pre><code>&lt;v-select multiple :options="contactClients" v-model="clientParticipants"&gt;&lt;/v-select&gt;
  </code></pre>
  
  <p>Now I'm having a other v-select which is in accordance with company name but is_client is true, so I'm trying something like this:</p>
  
  <p>I've data set of companies:</p>
  
  <pre><code>{
      "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,
              }
          ]
  }       
  </code></pre>
  
  <p>I'm placing it in <code>companies</code> variable and filtering it something like this:</p>
  
  <pre><code>clients: function () {
      if(this.companies)
      {
          return this.companies
              .filter(f =&gt; f.is_client == 1)
              .map(d =&gt; ({label: d.name, value: d.id}))
      }
  } 
  </code></pre>
  
  <p>And in v-select I'm having:</p>
  
  <pre><code>&lt;v-select :options="clients" v-model="summary.client"&gt;&lt;/v-select&gt;
  </code></pre>
  
  <p>I want to have an extra filter in accordance to the selection of <code>contactsClients</code>, i.e. if any <code>contactsClients</code> are being selected in the first list, second list should have only those <code>company</code> as option and if there is no selection in first list(contactClients) then second list should have all default options with simple <code>is_client</code> filter which is in current situation. Since the selection in <code>contactClients</code> is multiple so I don't know how to filter elements. Please guide me.</p>
  
  <p><strong>Edit:</strong> <a href="https://codepen.io/anon/pen/BZaOEQ?editors=1010" rel="nofollow noreferrer">Codepen Link</a></p>