Vue js从数组中获取值

Question

以下代码包含航班信息。表显示价格和flightDuration，但我无法从航班数组获得航空公司名称。我是Vue js的新手，所以非常感谢任何帮助。

更新（仍然无效）：

    <tr v-for="flight in tickets.flights">
        <td>{{ flight.airline.name }}</td>
    </tr>

  JSON Data structure:
     data: {
    tickets: [{
  "price": 100,
  "flightDuration": "75",
  "flights": [
  {
    "departureTime": "12:00",
    "departureDate": "21 november",
    "arrivalTime": "13:15",
    "arrivalDate": "21 november",
    "airline": {
      "code": "DV",
      "name": "Scat"
    }
   }
   ]
  sortKey      : 'flights.departureDate',
            reverse      : false,
            columns      : [
                'flights.departureDate',
                'flightDuration'
            ]

https://jsfiddle.net/n7zjpgu5/

Answer 1

以下是正确的和正常的。

<tr v-for="ticket in tickets">
<td  v-for="flight in ticket.flights">
      {{ flight.airline.name }}
</td>
</tr>

Codepen：https://codepen.io/anon/pen/mozPRW

<tr v-for="ticket in tickets">
 <td v-for="flight in ticket.flights">{{ flight.departureDate }}</td>
 <td v-for="flight in ticket.flights">{{ ticket.flightDuration }}</td>
 <td v-for="flight in ticket.flights">{{ flight.airline.name }}</td>
</tr>

分叉您的小提琴并更新代码：https://jsfiddle.net/u2skLrz0/

Answer 2

你的问题是航班是一个阵列。这意味着可以有多家航空公司。你将不得不再次在flights上循环。

v-for="flight in product.flights"

如果您确定只有一个航班，您可以获得您的名字

{{ product.flights[0].airline.name }}

Answer 3

您可以像这样访问数组中的值：

<td>{{ product.flights[0].airline.name }}</td>

但如果数组中有更多元素，则只会显示第一个元素。对于这种情况，您可以像这样迭代数组：

<tr v-for="product in list">
    <td>{{ product.price }}</td>
    <td>
      <span v-for="flight in product.flights">{{ flight.airline.name }}</span>
    </td>
</tr>

Answer 4

该示例将适合您。

<tr v-for = “flight in data.flights”>
    <td>{{flight.airline.name}}</td>
</tr>