When my back-end service returns a JSON array with values, everything works fine. But when it doesn't have any values, I encounter an error in my front-end:
"[Vue warn]: Error in render: "TypeError: Cannot read property '0' of undefined"
As a newcomer to front-end development, I am struggling to figure out how to display the values only when the array actually exists. I am using Vue.Js and Vuetify to build my project...
-> I specifically need to access the first item in the array, as it always contains a single item.
Front-end
<v-data-table :headers="headers" :items="items" :search="search" sort-by="id" class="elevation-1">
<template v-slot:item="{item}">
<tr>
<td class="d-block d-sm-table-cell">{{ item.name }}</td>
<td class="d-block d-sm-table-cell">{{item.myArray[0].prop1}}</td>
...
Back-end JSON
[
{
"id": 1,
"name": "John",
"myArray": [
{
"prop1": "341",
}
]
},
{
"id": 2,
"nome": "22222"
}