Currently, I am facing an issue while trying to access a property within a nested object using a loop in my vuejs project. It's strange because similar nested objects work fine except for one.
<template>
<div>
<tr v-for="travel in travels" :key="travel.data.travel_request_id">
<td> <router-link :to="'/expense/'+ travel.data.request_no +'/travel' "> {{ travel.data.request_no }} </router-link> </td>
<td> {{ travel.data.summary.purpose}} </td>
<td> {{ travel.data.user.surname }} {{ travel.data.user.first_name }} </td>
<td> {{ travel.data.added_by.surname}} {{ travel.data.added_by.first_name }} </td>
<td> {{ travel.data.created_at }} </td>
<td> {{ travel.data.status }} </td>
</tr>
</div>
</template>
The error is thrown by travel.data.summary.purpose, even though it exists within the travels object.
{{ travel.data.summary }} returns an object with the attribute "purpose" but I cannot access it. The error message displayed is
[Vue warn]: Error in render: "TypeError: Cannot read property 'purpose' of null"
For further clarification, please click on this link.