JSON数据未显示在Vue.js中

Question

我正在制作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数据？

Answer 1

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

执行以下操作。

 this.userData = response.data.Applications