How can I get json data from a url using this.$http.get()?

Question

I am new to vuejs, please help me out on this-

this.$http.get() is not working. 

I tried -

npm install vue-resource

and

npm install vue-resource --save

Then I wrote this code

<template>
    <v-container>
        {{ questionData }}
    </v-container>
</template>



data () {
return {
  questionData: [],



mounted () {
 this.$http.get('http://api.iqube.org.in/questions').then(response => {

    this.questionData = response.body;
    console.log(response.body)
  }, error => {

  });
}

Console log shows undefined.

This is what my main.js looks like

import Vue from 'vue';
import router from './router';
import store from './store';

import './plugins/vuetify';
import './plugins/axios';

import './registerServiceWorker';

import App from './App.vue';

import VueResource from 'vue-resource';

Vue.use(VueResource);

Vue.config.productionTip = false

new Vue({
  router,
  store,
  render: h => h(App)
}).$mount('#app')

Am I importing something that is not required?

All the questions data should show in the page. But I am getting a blank page. I also get this error in console

Cannot redefine property: $http

Answer 1

After debugging your app i found that you re-defied (re-imported) Vueon your dailypractice.vue component also VueAxios/ axios... if you are going to use vueResource you don't need axios (i reccomend axios as a Vue dev )

// dailypractice.vue
  import Vue from 'vue'
  import axios from 'axios'
  import VueAxios from 'vue-axios'
  Vue.use(VueAxios, axios)

Just remove the previous code from your dailypractice component and also axios / VueAxios from your project (axios.js file) and your app will work fine.