无法访问 vue-resource 中的“get”方法

Question

我有一个很小的 vue 应用程序，我想在其中使用 vue-resource 来请求 api 端点。

我已经通过 npm

vue-resource

我已将 Vue.use(VueResource) 行添加到我的 bootstrap 文件中
我已经像这样设置我的组件来调用 .get 方法

Blog.vue

...
mounted () {
  this.fetchPosts()
},
methods: {
  fetchPosts: () => {
    debugger;
    this.$http.get('my-url')
      .then(response => {
        console.log(response)
      })
  }
}
...

我已经看到一些 github 问题和 SO 帖子涉及此类问题，但大多数似乎与我不 认为的不正确配置有关 我有（很高兴被证明是错误的！）

我得到的具体控制台错误是：

Error in mounted hook: "TypeError: Cannot read property 'get' of undefined"

奇怪的是，如果你看到我的 debugger 行，如果我 console.log this.$http.get 在那一点我得到：

function (url, options$) {
        return this(assign(options$ || {}, {url: url, method: method$}));
    }

如果我让代码运行然后尝试 console.log 我得到：

Cannot read property 'get' of undefined

因此，我认为这是某种 this 上下文问题，但据我所知，参考应该是正确的...不应该吗？

Answer 1

方法不应该是箭头函数。如果使用箭头函数声明方法，this 将不会指向 vue 实例。

改用普通函数：

methods: {
  fetchPosts(){
    debugger;
    this.$http.get('my-url')
      .then(response => {
        console.log(response)
      })
  }

可以看到警告here

无法访问 vue-resource 中的“get”方法

Unable to access `get` method in vue-resource

vue.js

vue-resource

vuejs2