Template node - v-table is not working

Dashboard 2.0
1

Hello !
I’ve this code working fine

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

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

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

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 !

2

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:

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

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

3

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

1 Like