我正在使用带有grapghql后端的vuejs。我使用查询来获取数据库中所有已存储的用户并显示在卡上。它工作正常,但我想按名称应用搜索并显示特定于该搜索的用户。我的问题是在本地变量中获取具有其属性的所有用户,现在我想使用name属性对其应用过滤器。如“结果”是所有用户的存储位置,它是文档类型。现在我想从结果变量中获取特定用户。我该怎么办?下面是附加的代码,这些代码可以从graphql查询中获取所有用户。
// Simple query that will update the 'hello' vue property
traveltwogether_users: {
query() {
// this.setCustomHeaders({
// "x-hasura-role": "anonymous"
// });
// return app_api.queries.main_user_feed;
const result = app_api.queries.main_user_feed;
console.log(result);
return result;
},
setContext() {
return {
// example of setting the headers with context per operation
headers: {
"x-hasura-role": "Anonymous"
}
};
}
}
}
这是向卡中的用户显示代码的方法,它运行良好
<b-row>
<b-colxx
xxs="12"
xs="6"
sm="4"
md="3"
v-for="(user, index) in traveltwogether_users"
:key="user.user_uuid"
>
<a :href="'/people/' + user.user_id">
<b-card class="mb-4 user-card" no-body>
<lazy-image-div
:background-img="true"
class="position-relative"
:s3-img-data="user.display_picture"
>
<b-badge
v-if="index % 2 === 0"
variant="primary"
pill
class="position-absolute badge-top-left"
>NEW</b-badge
>
<b-badge
v-if="index % 3 === 0"
variant="secondary"
pill
class="position-absolute badge-top-left-2"
>TRENDING</b-badge
>
<div class="placeholder"></div>
<div class="card-img-overlay-text text-center pb-3">
<h2 class="text-light">
<strong>{{ user.first_name }}., {{ user.age }}</strong>
</h2>
<b-button class="text-primary" variant="light">
<strong>
<i class="simple-icon-bubble"></i>
{{ $t("db-main.cta-users") }}
</strong>
</b-button>
</div>
</lazy-image-div>
</b-card>
</a>
</b-colxx>
</b-row>
现在我想从结果变量中获取具有名称的特定用户,然后返回显示在卡中
if (result.user.first_name == this.search) {
return this.search;
}