Ui-template & v-table: how to display array of data

Dashboard
1

Hi,

I am sending an array to the ui-table node, which displays that data perfectly.
When trying to send this data to a vuetify table, I am not getting any results in the table.
The code in the template node:

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

<script setup>
  const items = {{msg.payload}};
</script>

Where am I going wrong?

Thanks!

2

TLDR:

No need to bind this to an additional variable, you can just call msg.payload directly:

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

Explanation:

In VueJS there are two ways of defining things:

  • Options API
  • Composition API

The latter is cleaner if you don't have much to define, but is a lot more difficult to support in our use case where we're merging in component definitions to an existing component (ui-template), as such we only support the Options API way of defining things in VueJS.

The Options API prescribes a fixed set of "options" to define your Vue component, which are those presented in the "Template" of the ui-template's Node-RED panel when first created.

For your use case here, if you want to bind to an additional variable, you'd be able to use the data () { ... } section of the component definition.

That said, you actually don't need to in your use case, msg is already available to the contents in <template /> so you can just call that directly.

3

mind blown..
Thanks! Working perfectly of course.. :slight_smile: