I have a filtering component that filters a list of people based on multiple input values. The string-based inputs filter properly, but when I select more than one item in the multi-select, nothing is displayed. This is likely due to person.role not containing both values in the array.
<!-- rest of form -->
<v-select
outlined
multiple
v-model="filter.roleFilter"
:items="['Designer', 'Developer']"
/>
<!-- rest of form -->
The filtering logic
computed: {
filteredPeople() {
const searchVal = this.search;
const type = this.filter.accountypeFilter;
const role = this.filter.roleFilter;
const start = this.filter.dateStartFilter;
const end = this.filter.dateEndFilter;
if (type === '' && role === '' && start === '' && end === '' && searchVal === '') {
return this.people; // show everything if no filters are selected
}
// apply the filter function and return the filtered array
return this.people.filter((person) => (type === '' || person.accountType === type)
&& (role === '' || person.role.includes(role)) // <--- issue lies with this line
&& (start === '' || person.dateStart === start)
&& (end === '' || person.dateEnd === end)
&& (searchVal === '' || person.displayName.toLowerCase().includes(searchVal.toLowerCase())));
},
}
Is there a way to use something like
role.every(person.role.includes(role))