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. http://stackoverflow.com/questions/43646844/cannot-read-property-post-of-undefined-vue — Bert, Apr 27 '17 at 19:51

thanksd · Answer 1 · 2017-04-27T19:50:26.553

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 '17 at 19:50

answered Apr 27 '17 at 19:44

thanksd

54,176
22
157
150

Running just the above code works for me, so there must be something you're leaving out of the code in your question. – thanksd Apr 27 '17 at 19:51
1

See my comment. There must be some tutorial or something somewhere. But it turned out to be the `import` of `vue-resource`. – Bert Apr 27 '17 at 19:53
@thanksd thanks, the only thing i left out from this file is data, activated and methods properties - all of which are empty. – Manish Patel Apr 27 '17 at 19:53
@BertEvans I'm not sure that's the issue here. import vs require both work for me – thanksd Apr 27 '17 at 19:56
@user2393012 what versions of vue and vue-resource are you using? – thanksd Apr 27 '17 at 19:57
2

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. https://github.com/pagekit/vue-resource/blob/develop/dist/vue-resource.js#L1544 – Bert Apr 27 '17 at 20:00
2

oh yeah, @user2393012, the way you're defining `mounted` in your question won't provide a correct `this` reference. – thanksd Apr 27 '17 at 20:02
@thanksd - added versions into main text. BertEvans, thanks, doesn't seem to have fixed it so far though. – Manish Patel Apr 27 '17 at 20:03
thanks I now have a valid http in mounted - combination of import and changing the function did it for me! I find the import thing really odd. Function thing i understand, i've read about scope before in that case – Manish Patel Apr 27 '17 at 20:06
this same issue if i try to use `$http` outside the main.js in some service files why ? any idea – Pardeep Jain Nov 02 '17 at 10:07

score 0 · Answer 2 · edited Jul 15 '22 at 02:09

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>

Not able to use $http or Vue.http

2 Answers2

Linked