"this" равно "undefined" в запросе apollo (vue + nuxt)

Question

Я использую GraphQL (Symfony + API Platform) с Vue Apollo и Nuxt.

У меня есть страница с подробными сведениями о проблеме, и я хочу загрузить конкретную c проблему, но я всегда получаю 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

Я нашел решение

Как описано здесь , если просто нужно превратить

variables: {
  issueId: this.issueId
}

в

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

Но я не Не понимаю разницы

Answer 2

Используйте console.log() в created для проверки значений ...

... вероятно (не работает с vue в течение многих лет) должен быть $route.params.id один, без this. ..

... вы можете использовать это значение непосредственно в variables