Vue array multi-filter

index.html

<div id="app">
  <template v-for="tag in tags">
    <input type="checkbox" value="{{ tag }}" v-model="selectedTags" id="tag-{{ tag }}">
    <label for="tag-{{ tag }}">{{ tag }}</label>
  </template>
  <p v-show="selectedTags.length != 0">
    Filters: <span v-for="tag in selectedTags" class="label">{{ tag }}</span>
  </p>
  <ul>
    <li v-for="card in activeCards">{{ card.name }}</li>
  </ul>
</div>

script.js

var app = new Vue({
  el: '#app',
  data: {
    tags: ['php', 'js'],
    cards: [
      {
        tags: ['php'],
        name: 'PHP Project'
      },
      {
        tags: ['php', 'js'],
        name: 'Laravel Project php'
      },
      {
        tags: ['js'],
        name: 'Node Project'
      }
    ],
    selectedTags: []
  },
  computed: {
    activeCards: function() {
      if(this.selectedTags.length == 0) return this.cards;
      
      var activeCards = [];
      var filters = this.selectedTags;
      
      this.cards.forEach(function(card) {
        
        function cardContainsFilter(filter) {
          return card.tags.indexOf(filter) != -1;
        }
        
        if(filters.every(cardContainsFilter)) {
          activeCards.push(card);
        }
      });
      
      return activeCards;
    }
  }
});

scripts

<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/1.0.21/vue.min.js"></script>

styles

<link href="https://cdn.jsdelivr.net/foundation/6.2.0/foundation.min.css" rel="stylesheet" />

vue-array-multi-filter.markdown

Vue array multi-filter

A Pen by batbaatp on CodePen.

License.