在grapghql查询的结果中找到特定的属性

时间:2020-01-02 14:48:30

标签: vue.js graphql apollo

我正在使用带有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;
        }

0 个答案:

没有答案