如何使用this。$ http.get()从URL获取json数据?

时间:2019-07-12 09:28:57

标签: vue.js vue-resource

我是vuejs的新手,请帮助我-

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

我尝试-

npm install vue-resource

npm install vue-resource --save

然后我写了这段代码

<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 => {

  });
}

控制台日志显示未定义。

这是我的main.js的样子

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')

我要导入不需要的东西吗?

所有问题数据应显示在页面中。但是我得到了空白页。我也在控制台中收到此错误

Cannot redefine property: $http

2 个答案:

答案 0 :(得分:0)

您需要定义this.$http根:

import Vue from 'vue';
import router from './router';
import store from './store';
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')

 Vue.http.options.root = 'http://api.iqube.org.in/';

然后在您的骑乘装备上以及无论您包含this.$http的地方,添加您要定位的路线……如下:

mounted () {
    this.$http.get('/questions').then(response => {
    this.questionData = response.body;
    console.log(response.body)
    }, error => {

  });
}

答案 1 :(得分:0)

在调试您的应用程序后,我发现您在Vue组件上还​​dailypractice.vue / VueAxios上重新定义(重新导入)axios ...要使用vueResource,您不需要axios(我建议axios作为Vue开发人员)

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

只需从您的dailypractice组件中删除先前的代码,并从您的项目(axios.js文件)中删除axios / VueAxios,您的应用即可正常运行。