title: Multiple dropdown filters for table in vue js
body: <p>I'm trying to have a table in vue (bootstrapVue) and I want to apply several filters at once with dropdown menues above the table. But when I chose an option in the second dropdown the first one gets reset. This is probably very easy, but I'm a beginner and I don't get how to do it...</p>
  
  <p>This is my table:</p>
  
  <pre><code>&lt;b-table show-empty
           stacked="md"
           responsive
           hover:true
           :items="items"
           :fields="fields"
           :current-page="currentPage"
           :per-page="perPage"
           :filter="filter"
           :sort-by.sync="sortBy"
           :sort-desc.sync="sortDesc"
           @filtered="onFiltered"&gt;
  </code></pre>
  
  <p>This is my dropdown:</p>
  
  <pre><code>&lt;b-form-select v-model="filter" :options="city" class="mb-3" &gt;&lt;/b-form-select&gt;
  </code></pre>
  
  <p>The filter option is a build-in function I guess. Is the solution to dublicate it with another name and use it for the next dropdown?</p>
  
  <p>My Data looks like this:</p>
  
  <pre><code>const items = [{name: 'Der Kotti', kategorie: 'Spielplatz', stadt: 'Hamburg', straße: 'Kottwitzstraße', datum: moment('2018/02/15').format('D.M.Y'), tageszeit: 'Morgens &amp; Nachmittags', alter: 'Alle Altersgruppen', link: '', drinnen: 'Draußen', gruppe: '', sprache: '', regelmäßigkeit: ''}]
  </code></pre>
  
  <p>I used something like this in a different project:</p>
  
  <pre><code>$('#table-filter-category').on('change', function(){
    table.search(this.value).draw();
  });
  </code></pre>
  
  <p>But I don't know how to use this approach in the current project...</p>
  
  <p>Here are all my dropdown filters:</p>
  
  <pre><code>    &lt;b-row&gt;
    &lt;b-col lg="2" offset-lg="2" md="6" class="my-1"&gt;
      &lt;h5 style="text-align:left"&gt;Stadt:&lt;/h5&gt;
      &lt;b-form-select v-model="filter" :options="city" class="mb-3" &gt;&lt;/b-form-select&gt;
    &lt;/b-col&gt;
    &lt;b-col lg="2" md="6" class="my-1"&gt;
      &lt;h5 style="text-align:left"&gt;Kategorie:&lt;/h5&gt;
      &lt;b-form-select v-model="filter" :options="cat" class="mb-3" &gt;&lt;/b-form-select&gt;
    &lt;/b-col&gt;
    &lt;b-col lg="2" md="6" class="my-1"&gt;
      &lt;h5 style="text-align:left"&gt;Tageszeit:&lt;/h5&gt;
      &lt;b-form-select v-model="filter" :options="daytime" class="mb-3" &gt;&lt;/b-form-select&gt;
    &lt;/b-col&gt;
  &lt;/b-row&gt;
  </code></pre>
  
  <p>Edit:</p>
  
  <p>Ok, so after a while I figured out how to write my own filter function. I put it in the 'computed:' section in my .vue file.</p>
  
  <pre><code>filteredData: function(){
    let filterData = this.data
  
    if (this.checkCity.length &gt; 0){
      filterData = filterData.filter(data =&gt; {
        return this.checkCity.includes(data.stadt)
      })
    }
  
    return filterData
  }
  </code></pre>
  
  <p>Where <code>data</code> is my original data input, <code>filteredData</code> is the filtered data and <code>checkCity</code>is for example a checkbox with the <code>key</code> that I want to filter for. <code>checkCity</code> is used in the <code>v-model</code> of the checkbox.</p>