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根：

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

在调试您的应用程序后，我发现您在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，您的应用即可正常运行。

如何使用this。$ http.get（）从URL获取json数据？

2 个答案: