Uncaught TypeError: Cannot read property 'get' of undefined in VueJs

Question

I have following code

<div id="vue-instance">

</div>

JS

var vm = new Vue({
  el: '#vue-instance',
  data: {
  },
  ready:function(){
    this.loadCountries();
  },
  methods:{
        loadCountries(){
            this.$http.get('https://restcountries.eu/rest/v1/all',function(data){
                console.log(data);
          })
      }
  }
});

When I run the above code it gives me following error

Uncaught TypeError: Cannot read property 'get' of undefined

I have a fiddle

JsFiddle

Help would be much appreciated

stackoverflow.com/questions/33247812/this-http-vuejs-not-set — Ranjeet
– Ranjeet, Commented Feb 22, 2017 at 9:39

Saurabh · Accepted Answer · 2017-02-23 10:06:04Z

6

$http.get is from Vue Resource. Make sure you are pulling that in properly by adding vue-resource to your package.json, install it via npm install and in code:

var Vue = require('vue');

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

To use this in fiddle, you have to add vue-resource cdn link in external resources and use following in code:

Vue.use(VueResource)

See working demo: https://jsfiddle.net/49gptnad/187/

edited Feb 23, 2017 at 10:06

answered Feb 22, 2017 at 9:27

Saurabh

73.8k44 gold badges193 silver badges251 bronze badges

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

5 Comments

Vikram Anand Bhushan Over a year ago

how to do that in the fiddle ? All I want to do is an Ajax Call is there any other way ?

Vikram Anand Bhushan Over a year ago

I still can't see anything in the console although I see that the error is gone , and I test manually the url works fine

Saurabh Over a year ago

@Vikram There were few more errors in your code, see working solution here. Let me know in case of any query.

Vikram Anand Bhushan Over a year ago

it would be good if you can update that link in the Answer as well . So that its useful for other people

moses toh Over a year ago

@Saurabh Maybe you can help me. Look at this : stackoverflow.com/questions/52529345/…

Subham Mitra · Accepted Answer · 2017-11-09 11:51:55Z

4

In order to use $http you must install the vue-resource middleware first. You can use the following command to install it.

npm install vue-resource --save

After its installed go to your main.js file and import the vue resource as follows

import vueResource from 'vue-resource'

Now its imported so we just have to call the use method of Vue to work with this middleware. You can call the use method as follows.

Vue.use(vueResource)

answered Nov 9, 2017 at 11:51

Subham Mitra

411 bronze badge

Comments

Amresh Venugopal · Accepted Answer · 2017-02-22 11:09:49Z

0

As you have no plugin for vue-resource your this.$http is undefined. To add Vue-resource on js-fiddle add https://cdn.jsdelivr.net/g/[email protected],[email protected] to the external scripts section.

answered Feb 22, 2017 at 11:09

Amresh Venugopal

9,5895 gold badges41 silver badges52 bronze badges

Comments

Rodrigo Rodrigues · Accepted Answer · 2017-11-15 05:36:06Z

0

I fixed this issue of the following mode:

npm install bootstrap-vue --save
npm install vue-resource --save

in main.js

import Vue from './bootstrap'
import BootstrapVue from 'bootstrap-vue'

Vue.use(BootstrapVue)

create bootstrap.js

import Vue from 'vue'
import VueResource from 'vue-resource'

Vue.use(VueResource)

export { Vue }

In App.vue

this.$http.get('/api/module/all').then(...

edited Nov 15, 2017 at 5:36

answered Nov 15, 2017 at 5:13

Rodrigo Rodrigues

111 silver badge4 bronze badges

Comments

RajKon · Accepted Answer · 2019-10-26 20:53:22Z

0

I used another way as of Oct 2019. I first installed using NPM like this

npm install axios --save

I used this below later and doing this below got rid of the error.

import  axios  from 'axios';

answered Oct 26, 2019 at 20:53

RajKon

4701 gold badge8 silver badges21 bronze badges

Collectives™ on Stack Overflow

Uncaught TypeError: Cannot read property 'get' of undefined in VueJs

5 Answers 5

5 Comments

Comments

Comments

Comments

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

5 Answers 5

5 Comments

Comments

Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related