在VueJS中使用计算属性过滤结果时，如何在数组中显示所有文章？

Question

I am using VueJS to show a list of articles. Then I have some filters which use checkboxes and a computed property to filter the list of articles displayed, based on what tag is selected.

However, I would like to add a 'All' tag which would clear any applied filter tags that were selected previously (Sports/Schools). Is this possible? If so, what do I need to do? Any help welcome.

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;
    }
  }
});

Then my HTML is as follows;

<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

Change activeArticles to return all articles if all tag selected

    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

Just add

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

And apply onClick={resetFilters} listener to the 'All' checkbox

The computed activeArticles will update, because one of its dependents ( selectedTags ) updated.