Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

v-table & v-data-table static examples not working #603

Open
joepavitt opened this issue Feb 23, 2024 · 2 comments
Open

v-table & v-data-table static examples not working #603

joepavitt opened this issue Feb 23, 2024 · 2 comments
Labels
bug Something isn't working priority:low Low Priority size:S - 2 Sizing estimation point

Comments

@joepavitt
Copy link
Collaborator

joepavitt commented Feb 23, 2024

Description

https://discourse.nodered.org/t/vuetify-tables-in-dashboard-2/85791

Note this is using the example from the documentation of Vuetify: https://vuetifyjs.com/en/components/tables/#usage

Have you provided an initial effort estimate for this issue?

I have provided an initial effort estimate

@joepavitt joepavitt added size:S - 2 Sizing estimation point bug Something isn't working labels Feb 23, 2024
@joepavitt
Copy link
Collaborator Author

<template>
    <div v-for="item in desserts" :key="item.name">{{ item }}</div>
    <v-data-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-data-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>

If we just do a direct loop (outside of the Vuetify component), then this renders without any issues:

Screenshot 2024-02-23 at 08 22 54

So something about how the loop inside the Vuetify component runs is causing our problems.

@joepavitt joepavitt added the priority:low Low Priority label Mar 13, 2024
@joepavitt
Copy link
Collaborator Author

Workaround is to use the :items property of a v-data-table

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
bug Something isn't working priority:low Low Priority size:S - 2 Sizing estimation point
Projects
Status: Backlog
Development

No branches or pull requests

1 participant