title: Dynamically Filter an Array of Objects in Vue.js
body: <p>I have a Vue.js app. In this app, I'm trying to dynamically apply filter value to an <code>Array</code> of objects. Each object in the Array has fields. I'm trying to filter these objects by field values. Each field can be filtered by multiple values.</p>
  
  <p>At this time, I have been unsuccessful in figuring out how to do this filtering. I've tried using JavaScript's baked-in <code>filter</code> function. However, that always returned an empty result set for me. I've put together this <a href="https://jsfiddle.net/38eu2b7t/2/" rel="noreferrer">Fiddle</a>, which includes this code:</p>
  
  <pre><code>new Vue({
    el: '#app',
    data: {
      currentFilterProperty: '',
      currentFilterValue: '',
  
      cols: [
        { title: 'Name', prop:'name' },
        { title: 'Age', prop:'age' },
        { title: 'Birthday', prop:'birthday' },      
      ],
  
      dataFilters: [],
      data: [
        { name:'Patricia Miller', age:69, birthday:'04-15-1948' },
        { name:'Bill Baggett', age:62, birthday:'05-07-1955' },      
        { name:'Maxine Thies', age:21, birthday:'11-28-1995' },      
        { name:'Alison Battle', age:65, birthday:'08-07-1952' },      
        { name:'Dick Triplett', age:25, birthday:'08-27-1982' } 
      ]
    },
  
    methods: {
      addFilter: function() {
        var f = this.dataFilters[this.currentFilterProperty];
        if (!f) {
          this.dataFilters = {};
          this.dataFilters[this.currentFilterProperty] = [ this.currentFilterValue ];
        } else {
          this.dataFilters[this.currentFilterProperty].push(this.currentFilterValue);
        }
  
        // How to apply filter?
      }
    }
  })
  </code></pre>
  
  <p>I'm not sure how to apply the filters to the <code>data</code> object. </p>