Как показать все статьи в массиве при использовании вычисляемого свойства для фильтрации результатов в VueJS?

Question

Я использую VueJS, чтобы показать список статей. Затем у меня есть несколько фильтров, которые используют флажки и вычисляемое свойство для фильтрации списка отображаемых статей в зависимости от того, какой тег выбран.

Однако я хотел бы добавить тег «Все», который очистит все примененные теги фильтров, которые были выбраны ранее (спорт / школы). Это возможно? Если да, что мне делать? Любая помощь приветствуется.

var app = new Vue({
  el: '#app',
  data: {
    tags: ['all', 'sports', 'schools'],
    articles: [
      {tags: ['sports'], name: 'Why sports is fun'},
      {tags: ['sports', 'schools'], name: 'How sports helps schools'},
      {tags: ['schools'], name: 'Why students attend school'}
    ],
    selectedTags: []
  },
  computed: {
    activeArticles: function() {
      if(this.selectedTags.length == 0) return this.articles;

      var activeArticles = [];
      var filters = this.selectedTags;

      this.articles.forEach(function(article) {

        function articleContainsFilter(filter) {
          return article.tags.indexOf(filter) != -1;
        }

        if(filters.every(articleContainsFilter)) {
          activeArticles.push(article);
        }
      });
      return activeArticles;
    }
  }
});

Тогда мой HTML выглядит следующим образом:

<div id="app">

  <label for="showAllArticles">All</label>
  <input type="checkbox" value="showAllArticles">

  <div v-for="tag in tags">
    <input type="checkbox" value="{{ tag }}" v-model="selectedTags" id="tag-{{ tag }}">
    <label for="tag-{{ tag }}">{{ tag }}</label>
  </div>

  <p v-show="selectedTags.length != 0">
    Filters: <span v-for="tag in selectedTags" class="label">{{ tag }}</span>
  </p>

  <ul>
    <li v-for="article in activeArticles">{{ article.name }}</li> 
  </ul>

</div>

Answer 1

Измените activeArticles, чтобы возвращать все статьи, если выбран тег all

    activeArticles: function() {
      // if statement edited
      if(this.selectedTags.length == 0 || this.selectedTags.includes('all') )return this.articles;

      var activeArticles = [];
      var filters = this.selectedTags;

      this.articles.forEach(function(article) {

        function articleContainsFilter(filter) {
          return article.tags.indexOf(filter) != -1;
        }

        if(filters.every(articleContainsFilter)) {
          activeArticles.push(article);
        }
      });
      return activeArticles;
    }

Answer 2

Просто добавьте

methods: {
    resetFilters(e) {
      if (e.target.checked) {
         this.selectedTags = []
      }
    }
  }

И примените прослушиватель onClick = {resetFilters} к флажку «Все»

Вычисленное activeArticles будет обновлено, потому что один из его зависимых (selectedTags) обновлено.