首页 > 解决方案 > 从 vue 中的 axios 调用访问 json 数据

问题描述

我在邮递员中设置了一个假的 mocke 服务器来获取我的 vue 应用程序的 som 测试数据。这是我从服务器得到的:

在此处输入图像描述

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

<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
}

我错过了什么?

标签: jsonvue.jsaxios

解决方案


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

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

推荐阅读