Template node - v-table is not working

Hello !
I’ve this code working fine

      <li v-for="item in this.msg.payload">
          {{ item.number }} - 
          {{ item.start_time }} - 
          {{ item.gap }}

and this one is not working with v-table vuetify component

        <th class="text-left">#</th>
        <th class="text-left">Start time</th>
        <th class="text-left">Gap</th>
      <tr v-for="item in this.msg.payload" :key="item.number">
        <td>{{ item.number }}</td>
        <td>{{ item.start_time }}</td>
        <td>{{ item.gap }}</td>        

it return me this error
errorCaptured TypeError: item is undefined

my json data is

[ { "id": 10, "number": 1, "id_race": 1, "start_time": "2023-12-27T12:00:00.000Z", "gap": 30 }, { "id": 8, "number": 2, "id_race": 1, "start_time": "2023-12-27T12:30:00.000Z", "gap": 20 }, { "id": 9, "number": 3, "id_race": 1, "start_time": "2023-12-27T12:50:00.000Z", "gap": 10 }, { "id": 12, "number": 4, "id_race": 1, "start_time": "2023-12-27T13:05:00.000Z", "gap": 10 }, { "id": 11, "number": 5, "id_race": 1, "start_time": "2023-12-27T13:20:00.000Z", "gap": 5 } ]

Do you have any ideas ??
Thanks !

Hi @Cyprien - the only thing that immediately stands out is your use of this. which isn’t required when writing the HTML/Template.

Even then, I did try your flow and template, and the v-table would not render. It’s certainly an odd one. I tried a <ul /> and <v-data-table /> and both of those do work:

    <v-data-table v-if="msg.payload" :items="msg.payload"></v-data-table>
        <li v-for="item in msg?.payload">{{ item }}</li>

I even tried hard-coding in a static <v-table /> and that wouldn’t render either - so that seems to be an issue with Vuetify

Hi Joe !
Thank you for your answer !
You make a wonderfull work with Dashboard 2.0

1 Like