1

（这里是初学者）

我正在尝试在 Vue.js 中创建一个可以让我与 GitHub API 交互的应用程序。起初我尝试使用vue-github-api，但由于分页问题，​​我切换到octokat.js。

我尝试使用 vue-github-api 文档中建议的相同模板，然后切换到 octokat。

为简洁起见，我将包含这个小样本：

<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 它我得到这个：

[ 控制台日志输出]

我似乎无法从“获取”命令中获得所需的输出。

有没有人处理过类似的事情，或者你发现了一个明显的错误？

4

1 回答 1

1

让我们看一下从 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)
});

进一步阅读

于 2017-02-27T14:31:24.397 回答