[Vuejs]-How can I use a single search bar to filter two tables?

by

0👍

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

Leave a comment