0

I have a tiny vue app where I'm wanting to use vue-resource to request an api endpoint.

  1. I've installed vue-resource via npm
  2. I've added the Vue.use(VueResource) lines to my bootstrap file
  3. I've setup my component like this to call the .get method

Blog.vue

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

I've seen a few github issues and SO posts which touch on this type of problem but most seem to relate to incorrect configuration which I don't think I have (happy to be proven wrong!)

The specific console error I get is:

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

What's odd about this is that if you see my debugger line, if I console.log this.$http.get at that point I get:

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

If I let the code run and then attempt the console.log afterwards I get:

Cannot read property 'get' of undefined

As a result I presume it's some kind of this context issue, but from what I can see the reference should be correct...shouldn't it?

dougajmcdonald
  • 19,231
  • 12
  • 56
  • 89
  • Don't use arrow syntax on the methods, because you currently lost correct `this` context - use ES6 object shorthand `fetchPosts() { //...etc }` – Belmin Bedak Jul 27 '17 at 12:26
  • 1
    Possible duplicate of [VueJS: why is "this" undefined?](https://stackoverflow.com/questions/43929650/vuejs-why-is-this-undefined) – Bert Jul 27 '17 at 13:00
  • @BertEvans Possibly now I know the answer, at the time however the debugger statement and presence of the `get` method confused me – dougajmcdonald Jul 28 '17 at 06:56

1 Answers1

2

Methods should not be arrows function. The this will not point to the vue instance if a methods is declared using arrow function.

Use normal function instead:

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

You can see the warning here

tony19
  • 125,647
  • 18
  • 229
  • 307
Vamsi Krishna
  • 30,568
  • 8
  • 70
  • 78
  • 1
    hero! thanks, that was it. Still 11 minutes to accept the answer though! – dougajmcdonald Jul 27 '17 at 12:27
  • As a side point, why would the methods object not point to the vue instance? as someone new to view it's a bit awkward to want to use arrow functions where possible but needing to define older functions in other places. I foresee an issue where other developers may refactor out the `function` calls! – dougajmcdonald Jul 28 '17 at 06:55
  • @dougajmcdonald i could not understand you completely.... when vue instance or a new component which is essentially an extension of vue instance is created Vue internally binds `this` using `bind` to the vue instance. But `bind` cannot be used with arrow functions and `this` will be the context of its execution which is the module itself. – Vamsi Krishna Jul 28 '17 at 09:46