简体   繁体   中英

How to filter search input for two categories?

Following filter function computes the input of a search input field to only display elements, with a similar title like the search input :

const filteredNews = computed(() => {
    if (state.filter) {
        return props.news.filter(item => {
            return state.filter.toLowerCase().split(" ").every(v => item.title.toLowerCase().includes(v))
        });
    } else {
        return props.news;
    }
})

search input field :

<input class="filter-input" type="search" placeholder="Suche" v-model="state.filter">

the elements are then displayed in a v-for loop:

<div class="news-gallery" v-for="(card, key) in filteredNews" :key=key>
    // items...
</div>

Now I want to filter not only for title but also location . How would I need to change the filter function to achieve that?

Something like:

const filteredNews = computed(() => {
    if (state.filter) {
        return props.news.filter(item => {
            return state.filter.toLowerCase().split(" ").every(v => {
                item.title.toLowerCase().includes(v),
                item.location.toLowerCase().includes(v)
            })
        });
    } else {
        return props.news;
    }
})

I found a very simple way. Just change:

item.title.toLowerCase().includes(v)

to:

item.title.toLowerCase().includes(v) || item.location.toLowerCase().includes(v))

The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.

 
粤ICP备18138465号  © 2020-2024 STACKOOM.COM