I am currently utilizing VueJS to display a collection of articles. Additionally, I have integrated filters that utilize checkboxes and a computed property to refine the display of articles based on the selected tag.
However, I am interested in incorporating an 'All' tag that would clear any previously selected filter tags (such as Sports/Schools). Is it feasible to achieve this? If so, what steps should I take? I appreciate any guidance on this matter.
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;
}
}
});
Subsequently, the HTML structure is depicted below;
<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>