Comments (2)
<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](https://private-user-images.githubusercontent.com/99246719/307260423-5c601772-0e2f-4ba9-8ba8-8b96cbd5e2f1.png?jwt=eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJpc3MiOiJnaXRodWIuY29tIiwiYXVkIjoicmF3LmdpdGh1YnVzZXJjb250ZW50LmNvbSIsImtleSI6ImtleTUiLCJleHAiOjE3MTY0OTEwMjAsIm5iZiI6MTcxNjQ5MDcyMCwicGF0aCI6Ii85OTI0NjcxOS8zMDcyNjA0MjMtNWM2MDE3NzItMGUyZi00YmE5LThiYTgtOGI5NmNiZDVlMmYxLnBuZz9YLUFtei1BbGdvcml0aG09QVdTNC1ITUFDLVNIQTI1NiZYLUFtei1DcmVkZW50aWFsPUFLSUFWQ09EWUxTQTUzUFFLNFpBJTJGMjAyNDA1MjMlMkZ1cy1lYXN0LTElMkZzMyUyRmF3czRfcmVxdWVzdCZYLUFtei1EYXRlPTIwMjQwNTIzVDE4NTg0MFomWC1BbXotRXhwaXJlcz0zMDAmWC1BbXotU2lnbmF0dXJlPTMxY2Y1ZDg1ZTc4MmI4MjMzY2I0OWI2Mjg1Mzc3ZWEyOTM2NjUyOWQ1ODg4YmRiYmFhNGIyOTY1OTYyMDA4MjgmWC1BbXotU2lnbmVkSGVhZGVycz1ob3N0JmFjdG9yX2lkPTAma2V5X2lkPTAmcmVwb19pZD0wIn0.02jRd6Cm1ujf4-8H2iaywDDtjVHG--4xRzAaBamFo34)
So something about how the loop inside the Vuetify component runs is causing our problems.
from node-red-dashboard.
Workaround is to use the :items
property of a v-data-table
from node-red-dashboard.
Related Issues (20)
- Documentation - tweak docs for mobile users
- Dynamic Properties: UI Slider
- Dynamic Properties: UI Button
- Why no editableList is being used HOT 1
- Feature to disable and make page invisible or vice versa does not work properly HOT 2
- Allow multiple addressable outputs for "ui-template" node
- ui-link - theme undefined HOT 1
- Ui-Control behaviour upon Depoly HOT 1
- Property `class` not being updated when changing tabs HOT 7
- Hide disabled ui nodes HOT 9
- Create multiple dashboard instances HOT 1
- ui-switch does not update if a css class is injected with msg.class HOT 4
- Request for feature, Node red dashboard 2.0 "fill gauge from centre feature" .
- Add cache-control records to served files, particularly contrib ui node .m
- Add support for v-time-picker
- Investigate failing Cypress test on GH
- Merging multiple ui-base nodes
- If a custom widget is built in development mode then grid-row-end style is not present in the wrapper div
- UI Gauge - Improve icon sizing at varying sizes HOT 3
- ui-table ignores 'width' setting for type 'Link'
Recommend Projects
-
React
A declarative, efficient, and flexible JavaScript library for building user interfaces.
-
Vue.js
🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.
-
Typescript
TypeScript is a superset of JavaScript that compiles to clean JavaScript output.
-
TensorFlow
An Open Source Machine Learning Framework for Everyone
-
Django
The Web framework for perfectionists with deadlines.
-
Laravel
A PHP framework for web artisans
-
D3
Bring data to life with SVG, Canvas and HTML. 📊📈🎉
-
Recommend Topics
-
javascript
JavaScript (JS) is a lightweight interpreted programming language with first-class functions.
-
web
Some thing interesting about web. New door for the world.
-
server
A server is a program made to process requests and deliver data to clients.
-
Machine learning
Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.
-
Visualization
Some thing interesting about visualization, use data art
-
Game
Some thing interesting about game, make everyone happy.
Recommend Org
-
Facebook
We are working to build community through open source technology. NB: members must have two-factor auth.
-
Microsoft
Open source projects and samples from Microsoft.
-
Google
Google ❤️ Open Source for everyone.
-
Alibaba
Alibaba Open Source for everyone
-
D3
Data-Driven Documents codes.
-
Tencent
China tencent open source team.
from node-red-dashboard.