Question

我尝试使用vueJS v-for函数循环遍历多维json_object。

但我收到以下错误：

[Vue warn]：渲染函数出错：“TypeError：无法读取属性 'id'为null“

我的代码如下所示：

                    <tr v-for="timeblock in responseAPI">
                            <td>
                            {{timeblock.time}}
                            </td>
                            <td v-for="value in timeblock.appointment">
                            {{value.id}}
                            </td>
                            <td>
                            {{timeblock.break}}
                            </td>
                            <td>
                            {{timeblock.scheduled}}
                            </td>
                            <td>
                            {{timeblock.text}}
                            </td>
                        </tr>

我的json_object是这样的：

[
  {
    "time": "09:00",
    "break": null,
    "scheduled": "Stoel 1",
    "appointment": {
      "id": 1,
      "patient_id": 1,
      "chair_id": 1,
      "date": "2017-05-10",
      "time": "09:00:00",
      "duration": 30,
      "treatment_type": "Controle",
      "created_at": null,
      "updated_at": null
    },
    "text": null
  },
  {
    "time": "09:30",
    "break": null,
    "scheduled": "Stoel 1",
    "appointment": {
      "id": 2,
      "patient_id": 2,
      "chair_id": 1,
      "date": "2017-05-10",
      "time": "09:30:00",
      "duration": 30,
      "treatment_type": "Controle ",
      "created_at": null,
      "updated_at": null
    },
    "text": null
  } ]

Answer 1

您的timeblock.appointment不是数组，只是一个普通对象。试试

<td>
  {{timeblock.appointment.id}}
</td>

Answer 2

当v-for对象的值是每个键的值时，您不需要访问任何道具，因为该值不是键/值而只是值

  <td v-for="value in timeblock.appointment">
         {{value}}
    </td>

Answer 3

您的代码几乎是正确的，但是您没有为第二个循环提供要读取的索引：这是错误。

只需使其(timeblock, index)即可读取索引，并在第二个循环中使用您的timeblock[index].appointment

<tr v-for="(timeblock,index) in responseAPI">
  <td>
    {{timeblock.time}}
  </td>
  <td v-for="value in timeblock[index].appointment">
    {{value.id}}
  </td>
  <td>
    {{timeblock.break}}
  </td>
  <td>
    {{timeblock.scheduled}}
  </td>
  <td>
    {{timeblock.text}}
  </td>
</tr>

Vuejs v-for multidimensional array json_object

3 个答案: