如何使用单个搜索栏来筛选两个表

Question

我有一个Vue2应用程序，在其中一个页面上我有一对数据表。每个表都在一个选项卡后面，允许用户选择他们想要的。选项卡后面没有的是搜索栏，我将其分开，以避免与代码重复。但是，我需要它能够过滤/搜索正在查看的任何一个表。

当我尝试筛选其中一个时，它运行得很好，但由于我不能在v-model指令中绑定多个值，我不确定可以做些什么来实现我需要的。以下是相关代码。如有任何指导，我们将不胜感激。

搜索栏

<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>

处理搜索的脚本

注意：这在脚本中。每一个都是为它所查看的特定表而构建的。然而，如果我调用serviceKeyword或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

解决这个问题的方法很少。一种是简单地同时搜索/过滤两者。

您可以将resourceKeyword和serviceKeyword更改为简单的keyword，将其绑定到输入并使用它来过滤resourceDirectores和serviceDirectories。

一次只查看一个表/选项卡，所以这并不重要，还是我误解了？

如果在表格之间切换时想要完整的列表，可以在选项卡上添加@click="keyword === ''。

下面是一个代码示例，我制作了两个显示基于一个关键字过滤两个数组：https://codepen.io/bergur-the-encoder/pen/ExwBZMj

另一种解决方案是在选项卡上添加一个@click，以设置/告诉脚本您正在查看的内容，因此@click="activeTab=resourceDirectores"和@click="activeTab=serviceDirectores"

像以前一样更改为v-model="keyword，但在您的计算属性中检查activeTab数据属性

computed:
filteredServiceDirectories()  {
if (activeTab === 'resourceDirectives') {
return this.serviceDirectories // should not filter those
}
...//rest of code

然后对于filteredResourceDirectories 是相同的(或相反的(