"this"在apollo查询中是"undefined"(vue + nuxt)

Question

我将 GraphQL（Symfony + API 平台）与 Vue Apollo 和 Nuxt 一起使用。

我有一个问题的详细信息页面并想加载特定问题，但我总是得到 Cannot read property 'issueId' of undefined，因为 this 是 undefined。这是我页面的相关脚本部分

<script>
import gql from 'graphql-tag'

export default {
  data() {
    return {
      issueId: null
    }
  },
  created() {
    this.issueId = this.$route.params.id
  },
  apollo: {
    issue: {
      query: gql`
        query($issueId: ID!) {
          issue(id: $issueId) {
            id
            description
          }
        }
      `,
      variables: {
        issueId: this.issueId
      }
    }
  }
}
</script>

当我将 issueId 设置为 issues/3 时，它起作用了

variables: {
    issueId: 'issues/3'
}

Answer 1

使用 created 中的 console.log() 检查值 ...

... 可能（多年未使用 vue）应该只有 $route.params.id，没有 this ...

...可以直接在variables

中使用这个值

Answer 2

我找到了解决方案

如描述here，如果刚好要转

variables: {
  issueId: this.issueId
}

进入

variables() {
  return {
    issueId: this.issueId
  }
}

但我不明白其中的区别

"this"在apollo查询中是"undefined"(vue + nuxt)

"this" is "undefined" in apollo query (vue + nuxt)

vue.js

graphql

vue-apollo