从Vue中的axios调用访问json数据

时间:2018-12-16 21:00:19

标签: json vue.js axios

我在邮递员中设置了一个伪造的模拟服务器,以获取我的vue应用程序的som测试数据。这是我从服务器上得到的:

enter image description here

我想访问数据信息,但我很难这么做。这是我正在使用的代码:

<template>
  <div class="admin">
    <h1>This is admin page area</h1>

    <JsonEditor :objData="config" v-model="config" ></JsonEditor>

  </div>
</template>

<script>

import{getConfig} from "../utils/network";

import Vue from 'vue'
import JsonEditor from 'vue-json-edit'

Vue.use(JsonEditor)

export default{

  data: function () {
    return {
      config:{}
    }
  },
  created:function(){
    getConfig()
            .then(response => {
              console.log(response)
              this.config = response;
            })
            .catch(err => {
              console.log(err)
            })
  }
}
</script>

我尝试做response.data,但是没有用。我正在将其提供给json编辑器,但目前无法显示json。它是空的。这是我的网络通话代码:

import Vue from 'vue'
import axios from 'axios'
import VueAxios from 'vue-axios'

Vue.use(VueAxios, axios)

const getConfig = () =>{
    return Vue.axios.get('https://8db51a11-752e-4d64-b237-8195055fbf26.mock.pstmn.io')
};

//Export getConfig so other classes can use it
export{
  getConfig
}

我想念什么?

1 个答案:

答案 0 :(得分:0)

您也可以尝试提供then语句:

const getConfig = () =>{
    Vue.axios.get('https://8db51a11-752e-4d64-b237-8195055fbf26.mock.pstmn.io').then(response => {
return response.data});
};