JSON данные не отображаются в vuejs

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

Вам необходимо выполнить итерацию по приложениям объекту. Таким образом, чтобы получить applicationId, вам нужно будет соответствующим образом установить данные, только добавляя данные приложений в переменную userData .

Сделайте, как показано ниже.

 this.userData = response.data.Applications