Vuejs v-for multidimensional array 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

當V-的對象的值是你不需要訪問任何道具，因爲該值不是一個鍵/值，但價值僅

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

Answer 2

你timeblock.appointment不是一個數組但只是一個普通的對象。嘗試

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