Question

在下面的代码中包含航班信息。表显示了价格和flightDuration，但是我无法从flights数组中获得航空公司名称。我是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

您的问题是，航班是一个数组。这意味着可以有不止一家航空公司。您将不得不再次遍历flights。

v-for="flight in product.flights"

如果您确定始终只有一次航班，可以通过以下方式获取您的名字

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

Answer 2

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

<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 3

该示例将为您服务。

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

Answer 4

下面是正确的并且可以正常工作。

<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/

Vue JS从数组中获取价值

4 个答案: