Unable to access `get` method in vue-resource

Question

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

I've installed vue-resource via npm
I've added the Vue.use(VueResource) lines to my bootstrap file
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?

Don't use arrow syntax on the methods, because you currently lost correct this context - use ES6 object shorthand fetchPosts() { //...etc } — Belmin Bedak
– Belmin Bedak, Commented Jul 27, 2017 at 12:26
@BertEvans Possibly now I know the answer, at the time however the debugger statement and presence of the get method confused me — dougajmcdonald
– dougajmcdonald, Commented Jul 28, 2017 at 6:56

tony19 · Accepted Answer · 2022-07-15 23:08:20Z

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

edited Jul 15, 2022 at 23:08

tony19

140k24 gold badges281 silver badges354 bronze badges

answered Jul 27, 2017 at 12:25

Vamsi Krishna

31.4k8 gold badges73 silver badges81 bronze badges

Sign up to request clarification or add additional context in comments.

3 Comments

dougajmcdonald Over a year ago

hero! thanks, that was it. Still 11 minutes to accept the answer though!

dougajmcdonald Over a year ago

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!

Vamsi Krishna Over a year ago

@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.

Collectives™ on Stack Overflow

Unable to access `get` method in vue-resource

1 Answer 1

3 Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

3 Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related