javascript - 在 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;
    }