"No data available" in v-data-table

Dashboard
1

Maybe this is probably related to _client, but I cannot really firgure out why these 2 cases are happening with me.
I have a ui-template node with v-data-table. ui-template is not set to "Accept Client Data" in the DB2 settings.

Case 1:
Data is pushed to this template node without any _client info. I press the inject node which sends the data to the template and it says "No data available". If I refresh the browser, the data appears immediately.

Case 2:
The table view has a button in one of the columns, which sends out a message: @click="send({topic: 'edit', payload: item})". This message uses a ui-control to navigate to a different page which shows information about the selected line.
If I click "Back" in the browser or navigate back to the same page, the table is not showing the data any more.

I am not sure if these two cases are related or not.

The data-table is very simple, just some template to display the buttons, rest comes from msg.headers.

<template>
    <!-- Provide an input text box to search the content -->
    <v-text-field v-model="search" label="Search" prepend-inner-icon="mdi-magnify" single-line variant="outlined"
        hide-details></v-text-field>
    <v-data-table v-model:search="search" :items="msg?.payload" :headers="msg?.headers">

      <template v-slot:item.edit="{ item }">

        <v-container>
          <v-row align="center" justify="center">
            <v-col cols="auto">
              <v-btn prepend-icon="mdi-file-edit-outline" variant="tonal" @click="send({topic: 'edit', payload: item})">
                Edit
              </v-btn>
            </v-col>
            <v-col cols="auto">
              <v-btn prepend-icon="mdi-delete-outline" variant="tonal" @click="send({topic: 'delete', payload: item})">
                Delete
              </v-btn>
            </v-col>
          </v-row>
        </v-container>

      </template>


    </v-data-table>
</template>

<script>
  export default {
    data () {
      return {
        search: ''
      }
    },
    methods: {
        // add a function to determine the color of the progress bar given the row's item



    }
  }
</script>
2

If a database, I use ui-event to detect when a page is visible which then triggers a database refresh, which results in populated v-data-table.

That's what I thought was required, but I may be wrong. It works for me though :slight_smile:

Cheers
Bob

3

I would expect it to load up, especially given that you're passing msg.payload straight into items - do you have a small flow you can share to show the problem?

This suggests there is something (I don't know what yet) causing the ui-template to not load the msg correctly :thinking:

4

Please find my test flow below:

[{"id":"af9d84956d3ddeab","type":"change","z":"0e3249ddee2000e3","name":"Add Headers","rules":[{"t":"set","p":"headers","pt":"msg","to":"[{\"title\":\"User ID\",\"value\":\"id\",\"sortable\":true},{\"title\":\"Full Name\",\"value\":\"name\",\"sortable\":true},{\"title\":\"User Name\",\"value\":\"username\",\"sortable\":true},{\"title\":\"Page Access\",\"value\":\"pagestxt\"},{\"title\":\"Actions\",\"value\":\"edit\"}]","tot":"json"}],"action":"","property":"","from":"","to":"","reg":false,"x":610,"y":6180,"wires":[["048ce69d359921c0"]]},{"id":"048ce69d359921c0","type":"ui-template","z":"0e3249ddee2000e3","group":"50745a3fddb8a49e","page":"","ui":"","name":"User List","order":1,"width":"0","height":"0","head":"","format":"<template>\n    <!-- Provide an input text box to search the content -->\n    <v-text-field v-model=\"search\" label=\"Search\" prepend-inner-icon=\"mdi-magnify\" single-line variant=\"outlined\"\n        hide-details></v-text-field>\n    <v-data-table v-model:search=\"search\" :items=\"msg?.payload\" :headers=\"msg?.headers\">\n\n      <template v-slot:item.edit=\"{ item }\">\n\n        <v-container>\n          <v-row align=\"center\" justify=\"center\">\n            <v-col cols=\"auto\">\n              <v-btn prepend-icon=\"mdi-file-edit-outline\" variant=\"tonal\" @click=\"send({topic: 'edit', payload: item})\">\n                Edit\n              </v-btn>\n            </v-col>\n            <v-col cols=\"auto\">\n              <v-btn prepend-icon=\"mdi-delete-outline\" variant=\"tonal\" @click=\"send({topic: 'delete', payload: item})\">\n                Delete\n              </v-btn>\n            </v-col>\n          </v-row>\n        </v-container>\n\n      </template>\n\n\n    </v-data-table>\n</template>\n\n<script>\n  export default {\n    data () {\n      return {\n        search: ''\n      }\n    },\n    methods: {\n        // add a function to determine the color of the progress bar given the row's item\n\n\n\n    }\n  }\n</script>","storeOutMessages":true,"passthru":true,"resendOnRefresh":true,"templateScope":"local","className":"","x":800,"y":6180,"wires":[["3293fa30c5828070","ede002a80124e1de"]]},{"id":"3293fa30c5828070","type":"debug","z":"0e3249ddee2000e3","name":"User selection","active":true,"tosidebar":true,"console":false,"tostatus":false,"complete":"payload","targetType":"msg","statusVal":"","statusType":"auto","x":1020,"y":6140,"wires":[]},{"id":"ede002a80124e1de","type":"switch","z":"0e3249ddee2000e3","name":"Topic?","property":"topic","propertyType":"msg","rules":[{"t":"eq","v":"edit","vt":"str"},{"t":"eq","v":"delete","vt":"str"}],"checkall":"true","repair":false,"outputs":2,"x":990,"y":6180,"wires":[["34f59d9d1e8ca812","5e803c73a6cc05ed","ea459382a2956c7d","5617dcf752f042d0"],[]]},{"id":"2935010c9908737a","type":"ui-control","z":"0e3249ddee2000e3","name":"To Edit Page","ui":"cb79bc4520925e32","events":"all","x":1530,"y":6160,"wires":[[]]},{"id":"34f59d9d1e8ca812","type":"function","z":"0e3249ddee2000e3","name":"Handle logout","func":"msg.payload = { \"page\": \"User Details\" };\nreturn msg;\n","outputs":1,"timeout":0,"noerr":0,"initialize":"","finalize":"","libs":[],"x":1320,"y":6160,"wires":[["2935010c9908737a"]]},{"id":"5e803c73a6cc05ed","type":"change","z":"0e3249ddee2000e3","name":"Name","rules":[{"t":"set","p":"payload","pt":"msg","to":"payload.name","tot":"msg"}],"action":"","property":"","from":"","to":"","reg":false,"x":1250,"y":6220,"wires":[["15b7a4e07023338e"]]},{"id":"15b7a4e07023338e","type":"ui-text","z":"0e3249ddee2000e3","group":"8c3173ee8b65ede4","order":1,"width":0,"height":0,"name":"","label":"Name","format":"{{msg.payload}}","layout":"row-spread","style":false,"font":"","fontSize":16,"color":"#717171","className":"","x":1410,"y":6220,"wires":[]},{"id":"ea459382a2956c7d","type":"change","z":"0e3249ddee2000e3","name":"Userid","rules":[{"t":"set","p":"payload","pt":"msg","to":"payload.username","tot":"msg"}],"action":"","property":"","from":"","to":"","reg":false,"x":1250,"y":6260,"wires":[["f3d231e1e3f73aeb"]]},{"id":"f3d231e1e3f73aeb","type":"ui-text","z":"0e3249ddee2000e3","group":"8c3173ee8b65ede4","order":2,"width":0,"height":0,"name":"","label":"User Name","format":"{{msg.payload}}","layout":"row-spread","style":false,"font":"","fontSize":16,"color":"#717171","className":"","x":1430,"y":6260,"wires":[]},{"id":"5617dcf752f042d0","type":"change","z":"0e3249ddee2000e3","name":"Userid","rules":[{"t":"set","p":"payload","pt":"msg","to":"payload.userid","tot":"msg"}],"action":"","property":"","from":"","to":"","reg":false,"x":1250,"y":6300,"wires":[["c2f821055808d050"]]},{"id":"c2f821055808d050","type":"ui-text","z":"0e3249ddee2000e3","group":"8c3173ee8b65ede4","order":3,"width":0,"height":0,"name":"","label":"User ID","format":"{{msg.payload}}","layout":"row-spread","style":false,"font":"","fontSize":16,"color":"#717171","className":"","x":1420,"y":6300,"wires":[]},{"id":"4174b97a6cc4a7f8","type":"inject","z":"0e3249ddee2000e3","name":"Test Data","props":[{"p":"payload"},{"p":"topic","vt":"str"}],"repeat":"","crontab":"","once":false,"onceDelay":0.1,"topic":"","payload":"[{\"id\":\"1234ABC\",\"name\":\"Test User\",\"username\":\"a\",\"edit\":\"1234ABC\",\"pagestxt\":\"User Access\"},{\"id\":\"FHEMMEC\",\"name\":\"Second User\",\"username\":\"c\",\"edit\":\"FHEMMEC\",\"pagestxt\":\"User Access\"}]","payloadType":"json","x":420,"y":6180,"wires":[["af9d84956d3ddeab"]]},{"id":"50745a3fddb8a49e","type":"ui-group","name":"User List","page":"4a3e5c66d6086fee","width":"12","height":"1","order":1,"showTitle":true,"className":"","visible":"true","disabled":"false"},{"id":"cb79bc4520925e32","type":"ui-base","name":"My UI","path":"/dashboard","includeClientData":true,"acceptsClientConfig":["ui-notification","ui-control","ui-text"],"showPathInSidebar":false},{"id":"8c3173ee8b65ede4","type":"ui-group","name":"User Details","page":"3c09c41d22450231","width":"6","height":"1","order":1,"showTitle":true,"className":"","visible":"true","disabled":"false"},{"id":"4a3e5c66d6086fee","type":"ui-page","name":"User Administration","ui":"cb79bc4520925e32","path":"/page15","icon":"home","layout":"grid","theme":"0d92c765bfad87e6","order":17,"className":"","visible":"true","disabled":"false"},{"id":"3c09c41d22450231","type":"ui-page","name":"User Details","ui":"cb79bc4520925e32","path":"/userdetails","icon":"home","layout":"grid","theme":"0d92c765bfad87e6","order":1,"className":"","visible":"false","disabled":"false"},{"id":"0d92c765bfad87e6","type":"ui-theme","name":"Basic Blue Theme","colors":{"surface":"#4d58ff","primary":"#0094ce","bgPage":"#eeeeee","groupBg":"#ffffff","groupOutline":"#cccccc"},"sizes":{"pagePadding":"12px","groupGap":"12px","groupBorderRadius":"4px","widgetGap":"12px"}}]

All I have done since yesterday is added an "Test Data" inject node so you have something to test. But at this moment, I am not getting the "No data available" message. Strange...
But the second issue is reporudcable. If I use any of the Edit buttons (delete does not implemented yet), it takes me to a new page but either using the back navigation or the page selection under the hamburger menu shows an empty data-table. But if you tell me that it needs to be refreshed at each page load, I am OK with that. Or if I should add something to the watch function.