For some reason, I am facing an issue with rendering data stored in a JSON object. It seems to work perfectly fine when written in plain JavaScript, but when I convert it to Vue, it fails to work. I even tried reverting back to an older commit to see if the issue resolves itself, but unfortunately, the problem persists and I cannot seem to make sense of it.
I have omitted a lot of code, but this should give you an idea of what's going on.
TableRecords.vue
<template
v-for="day in ['Monday', 'Tuesday', 'Wednesday', 'Thursday', 'Friday', 'Saturday', 'Sunday']">
<td v-for="shift in ['10-6', '6-2', '2-10']">
<a href="#"
v-on:click="record.Status === 'Active' ? showScheduleModal(record.FileNumber, day, shift) : null"
style="text-decoration: none;"
v-html="data.schedule[record.FileNumber][day][shift]">
</a>
</td>
</template>
data.schedule
{
"954107":{
"Monday":{
"2-10":"<span style=\"color: #3831bd\"><b>Non<br>Prod</b></span>",
"10-6":"<span style=\"color: black\">0</span>",
"6-2":"<span style=\"color: #3831bd\"><b>Non<br>Prod</b></span>"
},
// Remaining data omitted for brevity
}
}
Error
[Vue warn]: Error in render: "TypeError: Cannot read property 'Monday' of undefined"