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并将其添加到数组的对象中。现在，新对象具有以下外部结构：

[
    {
      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>

它不起作用，整个卡都不会显示在屏幕上，并且从编辑器（VS代码）中我可以看到v-for不是“采用”点符号。我看到了很多与此问题有关的问题，但没有一个帮助我。有人可以帮忙吗？谢谢 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与数组中的嵌套对象

2 个答案: