如何使用单个搜索栏过滤两个表？

Question

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)
      );
    },
   
  },

Answer 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