无法访问JSON对象中的单个数据：如何从JSON对象中将数据选出到VUE中

Question

我已经在堆栈和互联网上搜索了所有帮助，但似乎找不到任何可以解决我的问题的信息。

我目前正在尝试从存储在Vue src文件夹中的JSON文件读取数据。 该文件由三个数组组成，但数组名称已用点创建。 由于该文件是本地文件，因此我可以进入并更改数组的名称，但是最终我将让Vue从Web服务器动态读取此信息，所以我不想更改任何内容，因为我无法做到这一点在将来。

我只想解析文件中的一些信息，但似乎无法将这些信息选出来。

这是JSON：

 {
  "staging_nr_front_33.333.33.333 ": {
   "date": "2018-09-10 13:05:02",
  "webserver": "running",
  "memory": "79MB of 527MB available",
  "token_status": "present",
  "space": "5.3G of 16G used (34%) 11G available"
 },
 "staging_roll_444.444.444.44 ": {
  "date": "2018-09-10 13:02:44",
  "webserver": "running",
  "memory": "391MB of 993MB available",
  "token_status": "present",
  "space": "4.3G of 39G used (12%) 32G available"
},
"staging_nr_cont_55.555.555.555 ": {
"date": "2018-09-10 13:05:02",
"webserver": "running",
"memory": "94MB of 7302MB available",
"token_status": "present",
"space": "3.9G of 7.8G used (50%) 3.9G available"
}
}

这是我的Vue脚本部分：

 import roomIndex from '../serv.json';

  export default {
   name: 'HelloWorld',
   data() {
       return {
           roomIndex
       }
   },

在这里，我尝试在模板部分中调用它：

<p v-for="dt in roomIndex">{{ dt.date }} </p>

截至目前，当我使用这种格式时，我可以很好地获取JSON文件中的所有日期，但是如果我这样写：

  <p v-for="dt in roomIndex">{{dt[0].date }}</p>

尝试仅选择第一个日期，我得到此错误：渲染错误：“ TypeError：无法读取未定义的属性'date'

我已经尝试了很多事情，例如将数组名放在方括号内：

 <p v-for="dt in roomIndex">{{ dt.[staging_nr_front_33.333.33.333].date }}</p>

但这也不起作用。

如何仅从第一个数组获取日期对象？

我对Vue和JSON还是很陌生，所以如果这是一个简单的答案或我的代码完全古怪，请多多包涵...

谢谢你的帮助！！！！

Answer 1

正如在另一条评论中提到的那样，它看起来像是一个对象而不是数组，这就是为什么它没有像我应该的那样响应。 因为我需要显示每个服务器的日期和密钥（但在页面的不同部分），所以我想到了：

<div  v-for="(value, key, index) in roomIndex">
      <div class="box>
        <h2>{{ key }}</h2>
        <h1>Server Status</h1>
        <div  class="circle" :class="value.webserver"></div>
           <h3>Date</h3>
        </div>
       </div>
</div>

这给了我一个方框，其中输出了服务器的名称以及日期和彩色圆圈，具体取决于每个服务器的服务器状态。 它似乎解决了我的问题。

感谢您所有的帮助！