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.