vue-example-list-rendering

HTML

<script src="https://unpkg.com/vue@2/dist/vue.js"></script>

<div id="app">
  <h3>Search:</h3>
  <input type="checkbox" @change="onCheckBoxClick" id="1" value="1" v-model="search">
  <label for="1">1</label>
  <input type="checkbox" @change="onCheckBoxClick" id="2" value="2" v-model="search">
  <label for="2">2</label>
  <input type="checkbox" @change="onCheckBoxClick" id="3" value="3" v-model="search">
  <label for="3">3</label>
  <input type="checkbox" id="4" @change="onCheckBoxClick" value="4" v-model="search">
  <label for="4">4</label>
  <input type="checkbox" id="5" @change="onCheckBoxClick" value="5" v-model="search">
  <label for="5">5</label>
  <input type="checkbox" id="6" @change="onCheckBoxClick" value="6" v-model="search">
  <label for="6">6</label>

  <h3>Filter:</h3>
  <input type="checkbox" id="1" @change="onCheckBoxClick" value="1" v-model="filter">
  <label for="1">1</label>
  <input type="checkbox" id="2" @change="onCheckBoxClick" value="2" v-model="filter">
  <label for="2">2</label>
  <input type="checkbox" id="3" @change="onCheckBoxClick" value="3" v-model="filter">
  <label for="3">3</label>
  <input type="checkbox" id="4" @change="onCheckBoxClick" value="4" v-model="filter">
  <label for="4">4</label>
  <input type="checkbox" id="5" @change="onCheckBoxClick" value="5" v-model="filter">
  <label for="5">5</label>
  <input type="checkbox" id="6" @change="onCheckBoxClick" value="6" v-model="filter">
  <label for="6">6</label>

  <ul>
    <li v-for="article in filteredList">
      {{article.title}}
    </li>
  </ul>
</div>

JavaScript

new Vue({
  el: '#app',
  mounted() {
    this.filteredList = this.articles;
  },
  methods: {
    onCheckBoxClick() {
      // EZT ITT A LÉNYEG!!!
      this.filteredList = this.articles.filter(articles => !this.articles
        .filter(article => !this.search.includes(article.id))
        .filter(article => !this.filter.includes(article.id)).includes(articles));
      this.filteredList = this.filteredList.length ? this.filteredList : this.articles;
    },
  },
  data: function() {
    return {
      filteredList: [],
      articles: [{
        id: '1',
        title: 'Ez egy article'
      }, {
        id: '2',
        title: 'Ez egy másik article'
      }, {
        id: '3',
        title: 'Ez egy harmadik article'
      }, {
        id: '4',
        title: 'Ez egy negyedik article'
      }, {
        id: '5',
        title: 'Ez egy ötödik article'
      }, {
        id: '6',
        title: 'Ez egy hatodik article'
      }, ],
      search: [],
      filter: [],
    };
  },
})