如何使用 this.$http.get() 从 url 获取 json 数据？

Question

我是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

Answer 1

您需要定义 this.$http root :

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

  });
}

Answer 2

在调试您的应用程序后，我发现您 re-defied (re-imported) 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将正常工作。

Answer 3

不要忘记导入 axios 并在 main.js 中使用它。

import axios from 'axios'

Vue.use(axios)

如何使用 this.$http.get() 从 url 获取 json 数据？

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

vue.js

vue-resource