Vuejs v-for 多维数组json_object

Question

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

但是我收到以下错误：

[Vue warn]: Error in render function: "TypeError: Cannot read property 'id' of 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 object 的值是每个键的值时，您不需要访问任何属性，因为该值不是 key/value 而只是值

  <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 多维数组json_object

Vuejs v-for multidimensional array json_object

html-table

multidimensional-array

vue.js

v-for