Json 数据未在 vuejs 中显示答案

【问题标题】：Json data not showing in vuejsJson 数据未在 vuejs 中显示
【发布时间】：2019-08-09 13:46:09
【问题描述】：

我正在制作一个 vue 应用程序。我将 .json 文件放在静态目录中。我正在尝试在默认的 HelloWorld.vue 文件中读取它。但它没有显示在浏览器中。这是它在浏览器中显示的内容：

我的 json 文件如下所示：

{
    "status": "success",
    "message": "Successfully retrieved all registered applications",
    "Applications": [
        {
            "ApplicationID": "74382DOD",
            "ApplicationName": "OIMInstance2",
            "ApplicationType": "OIM",
            "APIToken": "ZM8R4FRiZWWKbl235u06zbArCdOBPlEKhqHQO8Y9RJ2HgBPC+cZgbIli8fFuNZaey/2tJciJuILIWIn24WTjGA=="
        },
        {
            "ApplicationID": "943ODA6G",
            "ApplicationName": "LDAPInstance2",
            "ApplicationType": "LDAP",
            "APIToken": "R9lDEW5dnN6TZg2sefEEzS6LWMNmFh4iLHMu47LmAsusHl0bZuh2rktSlXqSZRdHHEWq7sP4Xsdy6xNtDYE8xw=="
        }
    ]
}

我在 HelloWorld.vue 中的代码是：

<template>
  <div>
    <h1>APPLICATION REGISTRATION</h1>
    <div v-for="udata in userData">
      Id : {{ udata.ApplicationID }}
    </div>
  </div>
</template>

<script>

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

Vue.use(VueAxios, axios)

export default {
  name: 'HelloWorld',

  data () {
    return {
      userData: []
    }
  },

   created: function() {
    axios.get('../../static/mockdata.json')
    .then(response => {
      this.userData = response.data
    })
    .catch(e => {
      //this.errors.push(e)
    })
   }
}
</script>

我的代码有什么问题吗？如何在浏览器中显示json数据？

【问题讨论】：

只能导入文件，为什么还要用axios？考虑到它正在通过循环，问题是返回的数据以及您如何进行引用。Prob 属性返回未定义。
只是尝试在axios的回调中控制台userData。数据是否以正确的方式传入
如果数据在 axios 中以正确的方式出现，您可以尝试在 beforeMount() 方法或 mount() 方法中调用 axios

标签： json vue.js axios

【解决方案1】：

您需要遍历 applications 对象。因此，为了获得 applicationId，您需要通过仅在 userData 变量中添加应用程序数据来相应地设置数据。

如下操作。

 this.userData = response.data.Applications

【讨论】：