Vue.js multiple search with checkboxes - vue.js

Question

I'm trying to create a search form with input text fields and checkboxes.
Right now I have the search working for text fields but I can't make it work for checkboxes.
I'm totally new with vue.js so probably I'm missing some basic stuff.
The problem is in the computed part in the last filter, with the categories checkboxes:
computed: {
filteredExperiences() {
return this.experiences.filter( item => {
return (
item.destination.toLowerCase().indexOf(this.searchDestinations.toLowerCase()) > -1
&& item.title.toLowerCase().indexOf(this.searchExperiences.toLowerCase()) > -1
&& item.categories.map(cat => cat.title.toLowerCase()).indexOf(this.checkedCategories.toLowerCase()) > -1
)
})
}
}
So searchDestinations and searchExperiences work fine but search by categories doesn't.
Any idea why? What am I doing wrong?
This is the full code:
var app = new Vue({
el: '#app',
data: {
destinations: [{
title: 'Madrid',
slug: 'madrid'
},
{
title: 'London',
slug: 'london'
},
{
title: 'Chicago',
slug: 'chicago'
},
{
title: 'Los Angeles',
slug: 'los-angeles'
}
],
categories: [{
title: 'Concerts',
slug: 'concerts'
},
{
title: 'Museums',
slug: 'museums'
},
{
title: 'Theaters',
slug: 'theaters'
},
{
title: 'Cinemas',
slug: 'cinemas'
}
],
experiences: [{
id: 1,
title: 'Bruce Springsteen Live Madrid',
destination: 'Madrid',
categories: ['concerts', 'theaters'],
duration: '2h'
},
{
id: 2,
title: 'Mulan 2 the movie',
destination: 'London',
categories: ['cinemas', 'theaters'],
duration: '2h'
},
{
id: 3,
title: 'British Museum',
destination: 'London',
categories: ['museums'],
duration: '3h'
}
],
checkedCategories: [],
searchDestinations: '',
searchExperiences: ''
},
computed: {
filteredExperiences() {
return this.experiences.filter(item => {
return (item.destination.toLowerCase().indexOf(this.searchDestinations.toLowerCase()) > -1 && item.title.toLowerCase().indexOf(this.searchExperiences.toLowerCase()) > -1)
})
}
}
});
Here is the codepen:
See the Pen
vue.js filtered multi-search by Javier (#oterox)
on CodePen.

Answer 1

the problem is here:
&& item.categories.map(cat => cat.title.toLowerCase()).indexOf(this.checkedCategories.toLowerCase()) > -1
like this it should work:
computed: {
filteredExperiences() {
return this.experiences.filter( item => {
if(item.destination.indexOf(this.searchDestinations) < 0) { return false }
if (item.title.indexOf(this.searchExperiences) < 0 ) { return false }
let matchedCats = item.categories.filter(cat => {
let hasCat = this.checkedCategories.findIndex(checkCat => cat.toLowerCase() === checkCat.toLowerCase());
return hasCat > -1;
})
if(this.checkedCategories.length > 0 && matchedCats.length < 1)
{
return false;
}
return true;
})
}
}