title: Vue JS use array to filterBy another array?
body: <p>Yep, it's me again. I'm trying to filter an array based on an array of strings. So while a single string filter is easy with Vue...</p>
  
  <p><code>&lt;div v-for="item in items | filterBy 'words' in 'property'"&gt;</code></p>
  
  <p>...multiple search strings becomes more complex. There's been several questions about how to do this on StackOverflow already, but very few answers. Currently I'm trying to repurpose the custom filter found <a href="https://stackoverflow.com/questions/37431062/vue-js-filterby-array-as-searchtext">here</a> for my needs, but it's not working.</p>
  
  <p><strong>My use case:</strong>
  I have an array of groups (checkboxes) that the user can select to filter an array of people. Each person is assigned to one or more groups so if <em>any</em> one of their groups is selected by the user, that person should show up.</p>
  
  <p>So my templates look like this:</p>
  
  <pre><code>    &lt;template v-for="group in ensemble_groups"&gt;
        &lt;input name="select_group[]" id="group_@{{ $index }}"
          :value="group"
          v-model="selected_groups"
          type="checkbox"&gt;
        &lt;label for="group_@{{ $index }}"&gt;@{{ group }}&lt;/label&gt;
      &lt;/template&gt;
  
      &lt;template v-for="person in cast | filterBy selectGroups"&gt;
        &lt;div&gt;@{{ person.actor_name }}&lt;/div&gt;
      &lt;/template&gt;
  </code></pre>
  
  <p>You see my custom filter <code>selectGroups</code> there? Here's my Vue arrays:</p>
  
  <pre><code>  selected_groups: [],
    ensemble_groups: ["Leads","Understudies","Children","Ensemble"],
  
    cast: [
      {
        actor_name: "Dave",
        groups: ["Leads"],
      },
      {
        actor_name: "Jill",
        groups: ["Leads"],
      },
      {
        actor_name: "Sam",
        groups: ["Children","Ensemble"],
      },
      {
        actor_name: "Austin",
        groups: ["Understudies","Ensemble"],
      },
    ],
  </code></pre>
  
  <p>And finally here's the custom filter. I can't tell if it's even being triggered or not, because when I click on a group checkbox, nothing happens.</p>
  
  <pre><code>filters: {
    selectGroups: function() {
      if (!selected_groups || selected_groups.length === 0) {
        return cast;
      }
      return this.recursiveFilter(cast, selected_groups, 0);
    }
  },
  methods: {
    recursiveFilter: function(cast, selected_groups, currentPosition) {
      if (currentPosition+1 &gt; selected_groups.length)
        return cast;
      var new_cast;
      new_cast = cast.filter(function(person) {
        for (group of person.groups) {
          if (group.value == selected_groups[currentPosition])
            return true;
        }
      });
      return this.recursiveFilter(new_cast, selected_groups, currentPosition+1);
    }
  }
  </code></pre>
  
  <p>So if the user selects <code>Leads</code> only Dave and Jill should appear. If the user then checks <code>Children</code>, Dave, Jill, and Sam should appear. I'm so close!</p>