Hello to everyone...
I am working on a dashboard2 template node. Among other things I am using a table to display data. I try to display an icon instead of the text value.
I condensed the code and successfully tested it on play.vuetifyjs.com. The icons are displayed correctly there.
However, when I use the same code in a FlowFuse Dashboard2 template node, the icons in the slots iconOn and iconOff are not rendered as icons; instead, the text value of item.iconOn and item.iconOff is displayed.
What do I do wrong?
DashboardVersion: 1.24.2
<template>
<v-app>
<v-container>
<v-data-table
:items="widget.level"
:headers="levelHeaders"
hide-default-footer
density="compact"
>
<template v-slot:item.on="{ item }">
<v-icon
v-if="settings.type == 'shellySwitch'"
:icon="item.on ? 'mdi-check-circle-outline': 'mdi-close-circle-outline'"
:color="item.on ? 'blue': 'red'"
>
</v-icon>
<v-chip
v-if="settings.type == 'shellyLight'"
size="small"
:color="item.on ? 'blue': 'red'"
variant="outlined"
>
{{item.on}}</v-chip
>
</template>
<template v-slot:item.active="{item}">
<v-icon
v-if="item.active <= 1"
:icon="item.active ? 'mdi-check-circle-outline': 'mdi-close-circle-outline'"
:color="item.active ? 'green': 'red'"
></v-icon>
<v-chip
v-else
text="Beispiel"
size="small"
color="blue"
variant="outlined"
></v-chip>
</template>
<template v-slot:item.iconOn="{ item }">
<v-icon
size="small"
color="blue"
variant="outlined"
:icon="item.iconOn"
></v-icon>
</template>
<template v-slot:item.iconOff="{ item }">
<v-icon
size="small"
color="blue"
variant="outlined"
:icon="item.iconOff"
></v-icon>
</template>
<template v-slot:item.actions="{ item }">
<v-icon
v-if="item.i != 0"
icon="mdi-arrow-up"
size="small"
class="mr-4"
>
</v-icon>
<v-icon
v-if="item.i < widget.level.length -1"
icon="mdi-arrow-down"
size="small"
class="mr-4"
></v-icon>
<v-icon icon="mdi-pencil" size="small" class="mr-4"></v-icon>
<v-icon icon="mdi-delete" size="small"></v-icon>
</template>
<template v-slot:header.actions="{}">
<v-icon>mdi-plus-box-multiple-outline</v-icon>
</template>
</v-data-table>
</v-container>
</v-app>
</template>
<script>
export default {
data() {
// define variables available component-wide
// (in <template> and component functions)
return {
widget: {level: [ { "i": 0, "level": "Auto", "on": 1, "active": 0, "type": "Auto", "iconOn": "mdi-remote", "iconOff": "mdi-remote-off" }, { "i": 1, "level": "Uhr", "on": 5, "active": 0, "type": "Uhr", "iconOn": "mdi-alarm", "iconOff": "mdi-alarm-off", "events": [ { "i": 0, "start": "12:45", "duration": "01:30", "next": 1753181126802, "interval": "24", "time": 5400 }, { "i": 1, "start": "12:36", "duration": "01:30", "next": 1753180585447, "interval": "24", "time": 5400 } ] }, { "i": 2, "level": "Manuell", "on": 7, "active": 0, "type": "Manuell", "iconOn": "mdi-hand-back-left", "iconOff": "mdi-hand-back-left-off-outline" } ] },
levelHeaders: [
{ title: 'Ebene', key: 'level', align: 'center' },
{ title: 'Typ', key: 'type', align: 'center' },
{ title: 'On', key: 'on', align: 'center' },
{ title: 'Aktiv', key: 'active', align: 'center' },
{ title: 'Icon', key: 'iconOn', align: 'center' },
{ title: 'Icon-Off', key: 'iconOff', align: 'center' },
{ title: 'Aktionen', key: 'actions', align: 'center' }
],
settings: { "labelShort": "L20", "labelLong": "Shelly Light 20", "iconOn": "mdi-fan", "iconOff": "mdi-fan-off", "target": "s020l0", "type": "shellyLight", "buttons": [ { "label": "20\"", "action": "toggle", "time": 1200, "level": "Manuell" } ] }
}
},
watch: {
},
computed: {
},
methods: {
},
mounted() {
},
unmounted() {
},
}
</script>
