jeudi 2 juillet 2020

Vue.js multiple search with checkboxes

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.


Aucun commentaire:

Enregistrer un commentaire