Not able to use $http or Vue.http

Question

FOLLOW UP

A combination of comments answered this question. A followup is why the import/require statements matter. I thought the effectively did the same thing.

ORIGINAL QUESTION I'm trying to use vue-resource to make REST calls to an API. I have up to now a working Vue app that also uses vue-material and it works nicely. I'm just having trouble getting a reference to the http "object" through which I can make get/post/put calls.

The stack is basically vue-cli to create a webpack/npm project. vue-resouce is definitely in package.json:

"vue": "^2.2.1",
"vue-resource": "^1.3.1"

main.js looks like this:

import Vue from 'vue';
Vue.use(require('vue-material'));
Vue.use(require('vue-resource'));

import App from './App.vue'

console.log(this.$http);

new Vue({
el: '#app',
//other stuff
});

console.log(this.$http);

I put those console.log statements because I was initially getting errors like

cannot read property 'post' of undefined vue resource

Sure enough, both log statements yield "undefined". Vue.http yields the same.

What am I doing wrong here? Interestingly, vue-material is working fine...

UPDATE

Checking inside the Vue instance still yields undefined:

mounted: () => {
    console.log(this.$http);
}

UPDATE 2 -- a solution that works

Thanks for the comments, a combination of them solved it. Firstly change the require to import:

import VueResource from 'vue-resource';
Vue.use(VueResource);

And use the old way of creating a function for mounted:

mounted: function () {
    console.log(this.$http);
}

Answered this question yesterday. stackoverflow.com/questions/43646844/… — Bert
– Bert, Commented Apr 27, 2017 at 19:51

thanksd · Accepted Answer · 2017-04-27 19:50:26Z

4

You need to check for this.$http from within a Vue instance method:

import Vue from 'vue';
Vue.use(require('vue-resource'));

new Vue({
  el: '#app',
  mounted: function() {
    console.log(this.$http);
  }
})

edited Apr 27, 2017 at 19:50

answered Apr 27, 2017 at 19:44

thanksd

55.8k23 gold badges167 silver badges155 bronze badges

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

10 Comments

thanksd Over a year ago

Running just the above code works for me, so there must be something you're leaving out of the code in your question.

Bert Over a year ago

See my comment. There must be some tutorial or something somewhere. But it turned out to be the import of vue-resource.

Manish Patel Over a year ago

@thanksd thanks, the only thing i left out from this file is data, activated and methods properties - all of which are empty.

Bert Over a year ago

He for sure has the mounted function definition issue. And agree that either import or require should work, but require definitely did not in the other case. Also, with the latest versions it looks like Vue.use is no longer required. github.com/pagekit/vue-resource/blob/develop/dist/…

thanksd Over a year ago

oh yeah, @user2393012, the way you're defining mounted in your question won't provide a correct this reference.

|

tony19 · Accepted Answer · 2022-07-15 02:09:34Z

0

You can try an alternative. From the Vue web site: https://v2.vuejs.org/v2/cookbook/adding-instance-properties.html#Real-World-Example-Replacing-Vue-Resource-with-Axios

"Alias axios to Vue.prototype.$http. Then you’ll be able to use methods like this.$http.get in any Vue instance"

<script src="https://cdnjs.cloudflare.com/ajax/libs/axios/0.15.2/axios.js"></script>
<script>
Vue.prototype.$http = axios

...
this.$http
      .get('https://jsonplaceholder.typicode.com/users')
      .then(function(response) {
        vm.users = response.data
      })
...
</script>

edited Jul 15, 2022 at 2:09

tony19

140k24 gold badges281 silver badges354 bronze badges

answered Jun 6, 2018 at 23:34

NiceNAS

1051 silver badge6 bronze badges

Collectives™ on Stack Overflow

Not able to use $http or Vue.http

2 Answers 2

10 Comments

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

10 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related