Question

我有一个很小的vue应用，我希望使用vue-resource来请求api端点。

我已经通过npm

vue-resource

我已将Vue.use(VueResource)行添加到我的引导程序文件
我已经设置了这样的组件来调用.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$$1) {
        return this(assign(options$$1 || {}, {url: url, method: method$$1}));
    }

如果我让代码运行，然后尝试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`方法

1 个答案: