Question

我试图在Vue.js中的另一个v-for中使用v-for从父对象内部获取对象项。

数据结构：

flights: [
  {
    "airline": "BA",
    "airport": "EBJ",
    "status": {
      "_code": "A",
      "_time": "2018-03-02T14:19:00Z"
    }
  },
  etc....
]

<div v-for="flight in flights">
  <p>{{flight.airline}}</p>
  <p>{{flight.airport}}</p>

  <div v-for="st in flight.status">
    <p>{{st._code}}</p> // should return 'A'
    <p>{{st._time}}</p> // should return '2018-03-02T14:19:00Z'
  </div>
</div>

但是，st._code或st._time都不会返回任何内容。 st返回两个值（＆＃34; A＆＃34;＆＃34; 2018-03-02T14：19：00Z＆＃34;）。

有关如何在status对象中返回单个值的任何想法吗？

Answer 1

可以在对象上使用v-for，因为您尝试使用status，但语法略有不同;在迭代对象很有用的情况下，您通常希望包含键和值：

<div v-for="(val, key) in flight.status">
  <p>{{key}}: {{val}}</p>
</div>

会输出

<p>_code: A</p>
<p>_time: 2018-03-02T14:19:00Z</p>

在您的情况下，您已经知道了所需的特定密钥，因此不使用v-for会更容易，而只需使用例如{{flight.status._code}}。

除非每次飞行可以有多个“状态”，否则没有充分的理由将状态包装在数组中。这将适用于您现有的数据结构：

<div v-for="flight in flights">
  <p>{{flight.airline}}</p>
  <p>{{flight.airport}}</p>
  <p>{{flight.status._code}}</p> 
  <p>{{flight.status._time}}</p> 
</div>

Answer 2

您没有看到预期输出的原因是因为，这一行：

<div v-for="st in flight.status">

这意味着你期待vue迭代：

"status": {
  "_code": "A",
  "_time": "2018-03-02T14:19:00Z"
}

以上是一个对象，而不是一个数组......所以除非status是一个数组，否则它将不起作用。

如果您希望代码能够正常运行，请尝试将阵列更改为：

  flights: [
    {
      "airline": "BA",
      "airport": "EBJ",
      status: [{
        "_code": "A",
        "_time" : "2018-03-02T14:19:00Z"
      }]
    }
  ]

工作演示：

https://jsfiddle.net/943bx5px/82/

V-for Vue.js

2 个答案: