从表vuejs、graphql、json中搜索/过滤数据

Question

我有一个表，其中显示了数据中的ID和标题。我不得不从json中提取标题，json以字符串的形式保存在数据库中。现在我想在此表中进行筛选/搜索。我可以搜索ID，但不能搜索标题。谷歌给我看的东西我都试过了，但都没用。我做错了什么？

我是Vue的新手，有人能帮我吗？

代码：

<v-text-field
v-model="search"
append-icon="mdi-magnify"
label="Search"
single-line
hide-details
></v-text-field>

<v-data-table
:headers="headers"
:items="showActivatedOnly()"
:search="search"
sort-by="id"
class="elevation-1"
>....
showActivatedOnly: function(){
if(!this.search){
if(this.showActivatedSurveysOnly===true){
return this.adminSurveys
}else{
return this.adminSurveysOnlyActivated;
}
}
return this.getAllSurveysFiltered();
},
getAllSurveysFiltered() {
const surveys = this.adminSurveys;

const child = surveys.filter(item => {
let json = JSON.parse(item.json)
return json.title.toString().toLowerCase().includes(this.search.toLowerCase())
});

console.log(child + "CHILD")
console.log(surveys + "ALL_SURVEYS")

return(child)
},```

The Method getAllSurveysFiltered() response the right list but the elements aren't showing in my table.

Answer 1

第一个潜在问题是您试图在客户端过滤结果。如果结果的数量很小，您将始终能够在客户端中加载所有结果并从中进行筛选，那么这可能没问题。但是，如果搜索结果在结果的第一页中不匹配，而在后面的页面中匹配呢？然后客户端会错误地显示没有搜索结果。

问题的标题说你正在使用GraphQL，所以理论上你应该能够在服务器端使用类似以下的查询来过滤结果：

query {
surveys(where: { title_CONTAINS: "seachTermGoesHere" }) {
title
}
}

但是，该示例查询可能不完全适合您的用例，因为查询语法取决于后端的实现方式。

如果你最终在客户端过滤结果，你的过滤功能应该简化。如果我是你，我也会让它成为一个计算属性，这样它就会根据依赖项进行更新：

computed: {
filteredSurveys() {  
// This assumes that adminSurveys is an array of objects
// where each object has a `title` key
return this.adminSurveys.filter((survey) => {
return survey.title.toLowerCase().includes(this.search.toLowerCase())
})
},
}