title: Checkbox filtering with VueJS
body: <p>This is my first VueJS project (making the move from jQuery)  and I am trying to filter a grid with multiple checkboxes.  As you can see from the JavaScript, I have a filterJobs function that filters the array with values set from whats checked (the v-model="checkedLocations"). array.includes appears to filter on a single value and I'd like to filter multiple values. I don't want to pop or slice the array because if they uncheck a location the they'll be gone and won't rebind</p>
  
  <p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="true">
  <div class="snippet-code">
  <pre class="snippet-code-js lang-js prettyprint-override"><code>let careers = careers || {};
  
   careers.taleo = (function($){
  
     let app;
  
     let init = function() {
  
      app = new Vue({
        el: '#app',
        data: {
          locations: ['Scottsdale, AZ','Chandler, AZ','Irvine, CA','Denver, CO','Chicago, IL','Rockville, MD','Kansas City, MO','Charlotte, NC','Red Bank, NJ','Henderson, NV','Melville, NY','Allentown, PA','Irving, TX'],
          jobs: null,
          checkedLocations: []
        },
        created: function () {
          this.fetchData();
        },
        methods: {
            fetchData: function () {
              this.jobs = [
                { id: '1', title: 'Circuit Court Clerk', description: 'lorem ipsum', location: 'Charlotte, NC', department: 'Sales and Marketing', date: '23/10/17' },
                { id: '2', title: 'Tie Buyer', description: 'lorem ipsum', location: 'Irvine, CA', department: 'Media Relations', date: '21/10/16' },
                { id: '3', title: 'Leaded Glass Installer', description: 'lorem ipsum', location: 'Kansas City, MO', department: 'Public Relations', date: '16/09/17' },
                { id: '4', title: 'Wheat Inspector', description: 'lorem ipsum', location: 'Red Bank, NJ', department: 'Quality Assurance', date: '12/06/16' },
                { id: '5', title: 'Executive Officer, Special Warfare Team', description: 'lorem ipsum', location: 'Irving, TX', department: 'Public Relations', date: '19/03/18' },
                { id: '6', title: 'Wildlife Control Agent', description: 'lorem ipsum', location: 'Irvine, CA', department: 'Sales and Marketing', date: '07/01/17' },
                { id: '7', title: 'Arresting Gear Operator', description: 'lorem ipsum', location: 'Charlotte, NC', department: 'Asset Management', date: '04/09/17' },
                { id: '8', title: 'Arresting Gear Operator', description: 'lorem ipsum', location: 'Chandler, AZ', department: 'Tech Support', date: '01/04/17' },
                { id: '9', title: 'Biogeographer', description: 'lorem ipsum', location: 'Chicago, IL', department: 'Quality Assurance', date: '01/05/17' },
                { id: '10', title: 'LAN Systems Administrator', description: 'lorem ipsum', location: 'Scottsdale, AZ', department: 'Customer Relations', date: '29/04/18' },
                { id: '11', title: 'Copper Plater', description: 'lorem ipsum', location: 'Irving, TX', department: 'Tech Support', date: '17/08/17' },
                { id: '12', title: 'Leaded Glass Installer', description: 'lorem ipsum', location: 'Rockville, MD', department: 'Sales and Marketing', date: '02/11/16' },
                { id: '13', title: 'Line Cook', description: 'lorem ipsum', location: 'Chandler, AZ', department: 'Advertising', date: '02/12/17' },
                { id: '14', title: 'Special Education Teaching Assistant', description: 'lorem ipsum', location: 'Red Bank, NJ', department: 'Payroll', date: '02/05/17' },
                { id: '15', title: 'Clarinetist', description: 'lorem ipsum', location: 'Melville, NY', department: 'Payroll', date: '30/05/17' },
                { id: '16', title: 'Arresting Gear Operator', description: 'lorem ipsum', location: 'Henderson, NV', department: 'Payroll', date: '23/02/18' },
                { id: '17', title: 'Wheat Inspector', description: 'lorem ipsum', location: 'Red Bank, NJ', department: 'Tech Support', date: '12/08/16' },
                { id: '18', title: 'Wildlife Control Agent', description: 'lorem ipsum', location: 'Melville, NY', department: 'Payroll', date: '03/05/17' },
                { id: '19', title: 'Print Retoucher', description: 'lorem ipsum', location: 'Chicago, IL', department: 'Sales and Marketing', date: '19/06/16' },
                { id: '20', title: 'Mathematical Statistician', description: 'lorem ipsum', location: 'Scottsdale, AZ', department: 'Tech Support', date: '10/07/16' }
              ];
            },
            filterJobs: function(event) {
              app.jobs = app.jobs.filter(function (job) {
                return job.location.includes(app.checkedLocations);
              });
  
              // filterJobs: function(event) {
              //     app.jobs = app.jobs.filter( function( location ) {
              //       return !app.checkedLocations.includes( location );
              //     } );
            }
          }
      });
  
  
  
     };
  
  
     return { init, app };
  
  })();
  
  (function(){
    careers.taleo.init();
  })();</code></pre>
  <pre class="snippet-code-css lang-css prettyprint-override"><code>#app {
    padding: 25px;
  }
  #app ul {
    margin-left: 0;
    padding: 0;
  }
  #app ul li {
    list-style: none;
  }</code></pre>
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;link href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.0.0-alpha.6/css/bootstrap.min.css" rel="stylesheet"/&gt;
  &lt;script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.1.10/vue.min.js"&gt;&lt;/script&gt;
  
  &lt;div id="app"&gt;
  
    &lt;div class="container-fluid"&gt;
      &lt;div class="row"&gt;
        &lt;div class="col-md-3"&gt;
          &lt;h3&gt;Locations&lt;/h3&gt;
          &lt;ul&gt;
            &lt;li v-for="location in locations"&gt;
             &lt;input type="checkbox" v-model="checkedLocations" v-on:click="filterJobs" v-bind:value="location" /&gt;  {{location}}
            &lt;/li&gt;
          &lt;/ul&gt;
          &lt;span&gt;Checked locations: {{ checkedLocations }}&lt;/span&gt;
        &lt;/div&gt;
        &lt;div class="col-md-9"&gt;
           &lt;div class="jobs"&gt;
             &lt;div class="job" v-for="job in jobs"&gt;
               &lt;div class="card" style="margin: 5px 0"&gt;
                 &lt;div class="card-block"&gt;
                   &lt;h4 class="card-title"&gt;
                     {{ job.title }}
                   &lt;/h4&gt;
                   &lt;small class="pull-right text-muted" style="font-size: 12x"&gt;
                     {{job.date}}
                   &lt;/small&gt;
                   &lt;p class="card-text"&gt;
                      &lt;!-- {{job.description}} --&gt;
                   &lt;/p&gt;
                   &lt;button class="btn btn-sm btn-primary"&gt;View&lt;/button&gt;
                 &lt;/div&gt;
               &lt;/div&gt;
             &lt;/div&gt;
           &lt;/div&gt;
        &lt;/div&gt;
      &lt;/div&gt;
    &lt;/div&gt;
  
  &lt;/div&gt;</code></pre>
  </div>
  </div>
  </p>
  
  <p><a href="https://codepen.io/neil/pen/WjXrxx" rel="nofollow noreferrer">https://codepen.io/neil/pen/WjXrxx</a></p>