javascript - V-for 与数组中的嵌套对象

问题描述

我在 vue-bootstrap 卡中有一个 v-for，我需要用我通过 api 获取的对象数组的属性来填充它。

在模板中：

<Card
   v-for="option in travelOptions"
   :key="option.id"
   :cardHeader="option.type | type"
   mode="Ford Mustang"
   :seats="option.trip_instance.remaining_capacity | seats"
   :date="option.trip_instance.departure_time | date"
   :time="option.trip_instance.departure_time | time"
   btnText="Select"
   @btnClicked="select()"
/>

我收到的对象数组的结构有点像这样：

[
  {
    "type": "CARPOOL",
    "trip_instance": {
      "id": 23456,
      "departure_time": "2020-01-01 00:00:00",
      "remaining_capacity": 3,
      "trip": 138949,
      "vehicle": {
        "id": 1,
        "vehicle_type": {
          "category": "PERSONAL_CAR",
          "display_name": "Car Sharing"
        },
        "plate_number": "1234567890",
        "display_name": "Subaru",
        "color": "red",
        "capacity": 4
      }
    },
    "trip": {
      "id": 138949,
      "headsign": "hospital",
      "short_name": "C01",
      "direction": "0"
    },
    "pickup_point": {
      "stop": {
        "id": 36583,
        "lat": 45.1551513671875,
        "lon": 8.43579959869385,
        "stop_id": "id56757",
        "name": "il nome della fermata di pickup"
      },
      "arrival_time": "06:12:00",
      "departure_time": "06:12:00"
    },
    "dropoff_point": {
      "stop": {
        "id": 36583,
        "lat": 45.1551513671875,
        "lon": 8.43579959869385,
        "stop_id": "id909090",
        "name": "name dropOfff"
      },
      "arrival_time": "06:12:00",
      "departure_time": "06:12:00"
    },
    "reservation_type": {
      "mode": "CARPOOL"
    }
  }
]

option.type显示正常（它在对象的“第一层”上） option.trip_instance.departure_time，option.trip_instance.remaining_capacity不是，它们嵌套在 trip_instance 对象中。我将不得不显示其他嵌套对象的更多属性。

我之前在遍历数组时处理了嵌套对象（使用 v-for），它工作得很好，我可以像在上面的模板中那样访问属性。我认为问题可能是对象的第一层缺少唯一的 id，所以我在提交操作之前创建了一个并添加到数组的对象中。新对象现在具有以下外部结构：

[
    {
      id: 0
      type: 'CARPOOL',
      trip_instance: obj,
      trip: obj,
      pickup_point: obj,
      dropoff_point: obj,
      reservation_type: obj
    },
    {
      id: 1
      type: 'RENTAL',
      trip_instance: obj,
      trip: obj,
      pickup_point: obj,
      dropoff_point: obj,
      reservation_type: obj
    }
]

它没有解决问题。我阅读了有关创建嵌套 v-for 的信息，但它对我不起作用。此外，我只处理一个组件（卡片），而不是 withul和 nested li，因为我发现提供此解决方案的大多数示例。不过我试过了，我创建了包装卡片的 div，每个嵌套对象一个。就像是

<div
  v-for="option in travelOptions"
  :key="option.id"
>
  <div
    v-for="(trip, index) in travelOptions.trip_instance"
    :key="index"
  >
    <div
      v-for="(vehicle, index) in travelOptions.vehicle"
      :key="index"
    >
      <Card
        :type="option.type"
        :time="trip.departure_time"
        :seats="trip.remaining_capacity"
      />
    </div>
  </div>
</div>

它不起作用，整个卡片没有显示在屏幕上，并且从编辑器（VS Code）中我可以看到 v-for 没有“采用”点符号。我看到了很多关于这个问题的问题，但没有一个对我有帮助。有人可以帮忙吗？谢谢 x

标签： javascriptarraysvue.jsobjectv-for

javascript - V-for 与数组中的嵌套对象

问题描述

解决方案

推荐阅读