Борьба с fetch() в API Vue.Js + GitHub (octokat.js)

Question

Борьба с fetch() в API Vue.Js + GitHub (octokat.js)

(Новичок здесь)

Я пытаюсь создать приложение в Vue.js, которое позволило бы мне взаимодействовать с GitHub API. Сначала я попытался использовать vue-github-api, но из-за проблем, связанных с разбиением на страницы, я перешел на octokat.js.

Я попытался использовать тот же шаблон, который был предложен в документах vue-github-api, и просто переключился на октокат.

Для краткости приведу небольшой пример:

<template>
  <div class="row">
    <div class="col-sm-3">
      <div class="panel panel-default">
        {{ user.name }}
      </div>
    </div>
  </div>
</template>

<script>
export default {
  data () {
    return {
      userData: {},
      issuesList: {}
    }
  },
  mounted: function () {
    var Octokat = require('octokat')
    var octo = new Octokat({
      token: 'xxxxx'
    })

    octo.user.fetch(function (e, val) {
      this.userData = Object.assign({}, val)
      // or this.userData = val (not sure, which is correct)
    })
  },
  computed: {
    user: function () {
      if (this.userData) {
        return this.userData
      }
      return 'Uh-oh...'
    }
  }
}
</script>

<style></style>

Что я получаю это:

Uncaught TypeError: Cannot set property 'userData' of undefined

Если бы я сделал это:

this.userData = octo.user.fetch()

Тогда, если я console.log это я получаю это:

[ вывод console.log ]

Я просто не могу получить желаемый результат из команды "fetch".

Кто-нибудь имел дело с чем-то подобным, или вы заметили явную ошибку?

1

javascript vue.js github github-api octokat.js

Источник

user1228530 27 фев '17 в 13:31

1 ответ

Решение

Другие вопросы по тегам javascript vue.js github github-api octokat.js

user3050293 27 фев '17 в 14:31 2017-02-27 14:31 · Accepted Answer · 2017-02-27 14:31

Давайте посмотрим на выборку кода из GitHub API:

octo.user.fetch(function (e, val) {
  this.userData = Object.assign({}, val)
  // or this.userData = val (not sure, which is correct)
});

Внутри функции обратного вызова, которую вы пытаетесь назначить this.userData Однако это не работает.

То, что вы должны посмотреть здесь, это то, что this ссылаясь на?

Вы назначаете this.userData внутри обратного вызова octo.user.fetch, В следствии this не связан с вашим экземпляром Vue - он будет связан с вызывающей его функцией или в вашем случае undefined потому что транспортер, скорее всего, добавил 'use-strict' Прагма.

Что я могу сделать по этому поводу?

В ES6 у нас есть функции стрелок. Функции стрелки не имеют this поэтому связаны с ним this все еще ссылается на ваш экземпляр Vue.

octo.user.fetch((e, val) => {
  this.userData = Object.assign({}, val)
});

дальнейшее чтение