Here is an example of a Laravel API response:
{
id:1,
name: "Text",
category: {
id: 1,
name: "Text 2",
},
tags:[
{
id: 1,
name: "Tag1",
},
{
id: 2,
name: "Tag2",
},
],
},
In my front-end (using Vue.js), I have created a computed function to filter posts based on the user's selection of checkboxes associated with categories.
checkedCategory: []
.
.
let posts = this.posts;
if (typeof this.checkedCategory !== 'undefined' && this.checkedCategory.length > 0) {
posts = posts.filter((post) => {
return this.checkedCategory.indexOf(post.category.name) > -1;})}
So far, everything is working fine and posts are successfully filtered by selected categories.
However, each post can have multiple tags as well. Since tags are stored in an array of objects, I attempted to modify the code using .includes instead of .filter, but it resulted in empty output.
checkedTags: []
.
.
let posts = this.posts;
if (typeof this.checkedTags !== 'undefined' && this.checkedTags.length > 0) {
posts = posts.includes((post) => {
return this.checkedTag.indexOf(post['tags']) > -1;})}