Vue.js 带有复选框的多重搜索

Question

我正在尝试创建一个带有输入文本字段和复选框的搜索表单。 现在，我可以搜索文本字段，但无法使其适用于复选框。 我对 vue.js 完全陌生，所以可能我缺少一些基本的东西。

问题出在最后一个过滤器的计算部分，带有类别复选框：

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 
        ) 
    })
}

}

所以 searchDestinations 和 searchExperiences 工作正常，但按类别搜索却不行。

知道为什么吗？我做错了什么？

这是完整的代码：

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)
        })
    }
}

});

这里是代码笔：

请参阅 Javier (@oterox) 的笔 vue.js filtered multi-search 在CodePen。

Answer 1

问题出在这里：

        && item.categories.map(cat => cat.title.toLowerCase()).indexOf(this.checkedCategories.toLowerCase()) > -1 

这样它应该可以工作：

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;
           
    })
 }
}