0

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

但我收到以下错误：

[Vue 警告]：渲染函数中的错误：“TypeError：无法读取属性 '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
  } ]
4

3 回答 3

1

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

  <td v-for="value in timeblock.appointment">
         {{value}}
    </td>
于 2017-09-14T12:51:28.210 回答
0

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

<td>
  {{timeblock.appointment.id}}
</td>
于 2017-09-14T12:37:52.933 回答
0

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

只需让它(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>
于 2019-01-03T00:24:32.197 回答