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

Question

我在 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 的内容，但它对我不起作用。此外，我只处理一个组件（卡片），而不是 ul 和嵌套的 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>

它不起作用，整个 Card 没有显示在屏幕上，并且从编辑器（VS 代码）我可以看到 v-for 不是 'taking' 点符号。我看到很多关于这个问题的问题，但 none 帮助了我。有人可以帮忙吗？谢谢 x

Answer 1

Vue 不允许向已创建的实例动态添加新的根级响应式属性。但是，可以使用 Vue.set(object, propertyName, value) 方法向嵌套对象添加响应式属性：

Vue.set(vm.someObject, 'b', 2)
// interchangeably 
this.$set(vm.someObject, 'b', 2)

更多信息here

Answer 2

我的错。我以为我仔细看了资料，其实我没有。

我想说用 v-for 显示嵌套对象的属性没有问题，只是我们确切地知道我们在每个循环中试图显示什么是至关重要的。

在我的例子中，我没有注意到对象属性并不总是相同的（例如 trip_instance 不是数组中所有对象的属性，这是中断循环）。

因此，希望对某人有所帮助，如果您运行遇到 v-for 或一般迭代问题，确保您确切了解数据结构重新工作。希望我也得到了，一劳永逸。

感谢@djiss 花时间提供帮助。

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

V-for with nested objects in array

javascript

arrays

object

vue.js

v-for