I have a Vue2 app, on one of the pages I have a pair of data tables. Each table is behind a tab, allowing users to select which they want. What isn't behind a tab is the search bar, that I kept separate to avoid duplicating it with code. However, I need it to be able to filter/search through either table that's being viewed.
It works perfectly fine when I try to filter through one or the other, but because I can't bind multiple values in a v-model directive, I'm not sure what can be done to achieve what I need. Below is the relevant code. Any guidance would be greatly appreciated.
Search Bar
<div class="container-fluid search-bar">
<v-row no-gutters>
<v-col cols="12" md="5" sm="12" class="text-left">
<v-text-field
type="text"
class="form-control bg-white search-input"
placeholder="SEARCH CONTENT BY NAME OR KEYWORD"
v-model="serviceKeyword"
/>
</v-col>
<v-col cols="12" md="7" sm="12"> </v-col>
</v-row>
</div>
Script to handle the search
Note: this is within the script. Each one is built for the specific table it looks through. If I however, I can only get the search to work if I call in either serviceKeyword or resourceKeyword
computed: {
filteredServiceDirectories() {
if (!this.serviceKeyword) {
return this.serviceDirectories;
}
var searchBy = this.serviceKeyword.toLowerCase();
return this.serviceDirectories.filter(
(q) =>
q.name.toLowerCase().indexOf(searchBy) !== -1 ||
(q.organization &&
q.organization.name.toLowerCase().indexOf(searchBy) !== -1) ||
(q.categories &&
q.categories.some(
(c) => c.name.toLowerCase().indexOf(searchBy) !== -1
))
);
},
filteredResourceDirectories() {
if (!this.resourceKeyword) {
return this.resourceDirectories;
}
var resourceSearchBy = this.resourceKeyword.toLowerCase();
return this.resourceDirectories.filter(
(q) =>
q.name.toLowerCase().indexOf(resourceSearchBy) !== -1 ||
(q.organization &&
q.organization.name.toLowerCase().indexOf(resourceSearchBy) !== -1) ||
(q.resourceType &&
q.resourceType.value.toLowerCase().indexOf(resourceSearchBy) !== -1)
);
},
},
There are few ways to solve this. One is simply searching/filtering both at the same time.
You could change the resourceKeyword and serviceKeyword to simply keyword, bind that to the input and use it to filter both resourceDirectores and serviceDirectories.
Only one table/tab is being viewed at a time so it doesn't really matter, or am I misunderstanding?
If you want a full list when switching between tables you could add a @click="keyword === '' on the tab.
Here is a code-example I made two show filtering two array based on one keyword: https://codepen.io/bergur-the-encoder/pen/ExwBZMj
Another solution is to add a @click on the tab to set/tell the script what you are looking at, so @click="activeTab=resourceDirectores" and @click="activeTab=serviceDirectores"
Change to v-model="keyword like before but in your computed property check the activeTab data property
computed:
filteredServiceDirectories() {
if (activeTab === 'resourceDirectives') {
return this.serviceDirectories // should not filter those
}
...//rest of code
and then the the same (or opposite) for filteredResourceDirectories