Vuetify Tables in Dashboard 2

Dashboard
1

Simply copying the sample code from the Tables component in Vuetify and pasting it into a template node produces a console error "Cannot read properties of undefined (reading 'name')". It does not render in DB2.
It does work in Vuetify playground without errors though.
I've tried a few table examples and they have the same issues.

<template>
  <v-table>
    <thead>
      <tr>
        <th class="text-left">
          Name
        </th>
        <th class="text-left">
          Calories
        </th>
      </tr>
    </thead>
    <tbody>
      <tr
        v-for="item in desserts"
        :key="item.name"
      >
        <td>{{ item.name }}</td>
        <td>{{ item.calories }}</td>
      </tr>
    </tbody>
  </v-table>
</template>
<script>
  export default {
    data () {
      return {
        desserts: [
          {
            name: 'Frozen Yogurt',
            calories: 159,
          },
          {
            name: 'Ice cream sandwich',
            calories: 237,
          },
          {
            name: 'Eclair',
            calories: 262,
          },
          {
            name: 'Cupcake',
            calories: 305,
          },
          {
            name: 'Gingerbread',
            calories: 356,
          },
          {
            name: 'Jelly bean',
            calories: 375,
          },
          {
            name: 'Lollipop',
            calories: 392,
          },
          {
            name: 'Honeycomb',
            calories: 408,
          },
          {
            name: 'Donut',
            calories: 452,
          },
          {
            name: 'KitKat',
            calories: 518,
          },
        ],
      }
    },
  }
</script>
2

Well this is an odd one... it seems to be linked to the Vuetify component specifically, as if we just do a generic:

<div v-for="item in desserts">{{ item }}</div>

outside of the <v-table /> it renders without any issue. If I put this into the Vuetify playground though, it renders fine :confused:

Further investigation to follow...

1 Like
3

This does work if we use the data-table's :items option:

<template>
  <v-data-table :items="items"></v-data-table>
</template>

That does at least get us round the complete blockage, but I've recorded v-table & v-data-table static examples not working · Issue #603 · FlowFuse/node-red-dashboard · GitHub for future investigations too

1 Like