How do I check if the array does not exist into a <tr> - vuejs

Question

My back-end service return the json array only when it has values and when it doesn't I got the error in my front-end -

"[Vue warn]: Error in render: "TypeError: Cannot read property '0' of undefined"

I don't know how to list the values only when the array exists, I'm new with front-end development and trying to build it with Vue.Js and Vuetify...

-> I need to get the Array's first position because besides it is an array it always return only one 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"
    }

Answer 1

Check if item and item.myArray is not undefined and item.myArray have elements.

Try:

<td v-if='item && item.myArray && item.myArray.length' class="d-block d-sm-table-cell">{{item.myArray[0].prop1}}</td>

Try in CodePen: https://codepen.io/gborchardt/pen/WNvezWg