# Dashboard 2.0 and vuetify component, send payload to it

**URL:** https://discourse.nodered.org/t/dashboard-2-0-and-vuetify-component-send-payload-to-it/87724
**Category:** General
**Tags:** dashboard-2
**Created:** [5 May 2024 13:39 UTC](https://discourse.nodered.org/t/dashboard-2-0-and-vuetify-component-send-payload-to-it/87724 "2024-05-05T13:39:34Z")
**Posts on this page:** 2
**Page:** 1

<div class="post-metadata">

### Author: ![emiliogi77](https://avatars.discourse-cdn.com/v4/letter/e/54ee81/32.png) [@emiliogi77](https://discourse.nodered.org/u/emiliogi77)
#### Post date: [5 May 2024 13:39 UTC](https://discourse.nodered.org/t/dashboard-2-0-and-vuetify-component-send-payload-to-it/87724/1 "2024-05-05T13:39:34Z")

</div>

Hi all,  
I started a few months ago with Node red. Now I'm using Dashboard 2.0.  
my starting point was, use switch element from Vuetify with the name of the operator, and it works:

```auto
[
    {
        "id": "49c3160479f04b6c",
        "type": "ui-template",
        "z": "7a3b4795ea906904",
        "group": "",
        "page": "",
        "ui": "fb4659d6be89de62",
        "name": "Data Entry dialog",
        "order": 0,
        "width": 0,
        "height": 0,
        "head": "",
        "format": "<template>\n <div class=\"pa-4 text-center\">\n \n <v-dialog\n width=600px\n scrollable\n \n >\n <template v-slot:activator=\"{ props: activatorProps }\">\n <v-btn\n color=\"brown\"\n prepend-icon=\"mdi-earth\"\n text=\"Selezione multipla\"\n variant=\"outlined\"\n v-bind=\"activatorProps\"\n ></v-btn>\n </template>\n\n <template v-slot:default=\"{ isActive }\">\n \n <v-card fluid>\n <v-card-text class=\"px-4\" style=\"height: 300px;\">\n \n <p>{{ people }}</p>\n <v-switch\n v-model=\"people\"\n color=\"primary\"\n label=\"Matteo\"\n value=\"Matteo\"\n hide-details\n ></v-switch>\n <v-switch\n v-model=\"people\"\n color=\"primary\"\n label=\"Mario\"\n value=\"Mario\"\n hide-details\n ></v-switch>\n <v-switch\n v-model=\"people\"\n color=\"primary\"\n label=\"Franco\"\n value=\"Franco\"\n hide-details\n ></v-switch>\n <v-divider></v-divider>\n\n <v-card-actions>\n <v-btn\n text=\"Close\"\n @click=\"isActive.value = false\"\n ></v-btn>\n\n <v-spacer></v-spacer>\n\n <v-btn\n color=\"surface-variant\"\n text=\"Save\"\n variant=\"flat\"\n @click=\"isActive.value = false\"\n ></v-btn>\n </v-card>\n</template>\n</template>\n<script>\n export default { data () {\n return {\n people: [],\n }\n },\n watch: {\n \n people: function () {\n \n this.send({payload: this.people})\n }\n }\n }\n</script>\n\n",
        "storeOutMessages": true,
        "passthru": true,
        "resendOnRefresh": true,
        "templateScope": "widget:ui",
        "className": "",
        "x": 210,
        "y": 620,
        "wires": [
            [
                "aaff62236bcf200e"
            ]
        ]
    },
    {
        "id": "fb4659d6be89de62",
        "type": "ui-base",
        "name": "test _2",
        "path": "/dashboard",
        "includeClientData": true,
        "acceptsClientConfig": [
            "ui-notification",
            "ui-control"
        ],
        "showPathInSidebar": true,
        "navigationStyle": "default"
    }
]

But i want load the operator name from a csv file, but I can't get it to work

below what i have done (but it doesn't work 
[
    {
        "id": "ffce0710a655267d",
        "type": "inject",
        "z": "7a3b4795ea906904",
        "name": "",
        "props": [
            {
                "p": "payload"
            },
            {
                "p": "topic",
                "vt": "str"
            }
        ],
        "repeat": "",
        "crontab": "",
        "once": false,
        "onceDelay": 0.1,
        "topic": "",
        "payload": "",
        "payloadType": "date",
        "x": 360,
        "y": 1080,
        "wires": [
            [
                "b84afeccebde798a"
            ]
        ]
    },
    {
        "id": "b84afeccebde798a",
        "type": "file in",
        "z": "7a3b4795ea906904",
        "name": "Read CSV",
        "filename": "your csv file",
        "filenameType": "str",
        "format": "utf8",
        "allProps": false,
        "x": 550,
        "y": 1080,
        "wires": [
            [
                "bba130a584d68c83",
                "e81a8ccafd106bfa"
            ]
        ]
    },
    {
        "id": "bba130a584d68c83",
        "type": "debug",
        "z": "7a3b4795ea906904",
        "name": "debug 395",
        "active": true,
        "tosidebar": true,
        "console": false,
        "tostatus": false,
        "complete": "payload",
        "targetType": "msg",
        "statusVal": "",
        "statusType": "auto",
        "x": 810,
        "y": 1000,
        "wires": []
    },
    {
        "id": "e81a8ccafd106bfa",
        "type": "csv",
        "z": "7a3b4795ea906904",
        "name": "Parse CSV",
        "sep": ",",
        "hdrin": true,
        "hdrout": "none",
        "multi": "mult",
        "temp": "",
        "skip": 0,
        "strings": true,
        "include_empty_strings": false,
        "include_null_values": false,
        "x": 690,
        "y": 1180,
        "wires": [
            [
                "223e29b6390d746d",
                "07aad9509142be12"
            ]
        ]
    },
    {
        "id": "223e29b6390d746d",
        "type": "function",
        "z": "7a3b4795ea906904",
        "name": "Process Data",
        "func": "node.send({ topic: 'updatePeople', payload: msg.payload }); // Ensure msg.payload is the array of objects from CSV",
        "outputs": 1,
        "timeout": "",
        "noerr": 0,
        "initialize": "",
        "finalize": "",
        "libs": [],
        "x": 950,
        "y": 1080,
        "wires": [
            [
                "247357969cba7be9",
                "2ae101cceb16574b"
            ]
        ]
    },
    {
        "id": "07aad9509142be12",
        "type": "debug",
        "z": "7a3b4795ea906904",
        "name": "debug 396",
        "active": true,
        "tosidebar": true,
        "console": false,
        "tostatus": false,
        "complete": "payload",
        "targetType": "msg",
        "statusVal": "",
        "statusType": "auto",
        "x": 930,
        "y": 1180,
        "wires": []
    },
    {
        "id": "247357969cba7be9",
        "type": "debug",
        "z": "7a3b4795ea906904",
        "name": "debug 397",
        "active": true,
        "tosidebar": true,
        "console": false,
        "tostatus": false,
        "complete": "payload",
        "targetType": "msg",
        "statusVal": "",
        "statusType": "auto",
        "x": 1150,
        "y": 1120,
        "wires": []
    },
    {
        "id": "2ae101cceb16574b",
        "type": "ui-template",
        "z": "7a3b4795ea906904",
        "group": "",
        "page": "",
        "ui": "fb4659d6be89de62",
        "name": "Data Entry dialog",
        "order": 0,
        "width": 0,
        "height": 0,
        "head": "",
        "format": "\n<template>\n <div class=\"pa-4 text-center\">\n <v-dialog width=\"600px\" scrollable>\n <template v-slot:activator=\"{ props: activatorProps }\">\n <v-btn color=\"brown\" prepend-icon=\"mdi-earth\" text=\"Select Names\" variant=\"outlined\" v-bind=\"activatorProps\">\n </v-btn>\n </template>\n\n <template v-slot:default=\"{ isActive }\">\n <v-card fluid>\n <v-card-text class=\"px-4\" style=\"height: 300px;\">\n <div v-for=\"person in people\" :key=\"person.name\">\n <v-switch\n v-model=\"selectedPeople\"\n color=\"primary\"\n :label=\"person.name\"\n :value=\"person.name\"\n hide-details\n ></v-switch>\n </div>\n </v-card-text>\n <v-card-actions>\n <v-btn text=\"Close\" @click=\"isActive = false\"></v-btn>\n <v-spacer></v-spacer>\n <v-btn color=\"surface-variant\" text=\"Save\" variant=\"flat\" @click=\"sendData\"></v-btn>\n </v-card-actions>\n </v-card>\n </template>\n </v-dialog>\n </div>\n</template>\n\n<script>\nexport default {\n data() {\n return {\n people: [],\n selectedPeople: []\n };\n },\n methods: {\n sendData() {\n this.$emit('input', this.selectedPeople);\n this.isActive = false;\n }\n },\n mounted() {\n this.$root.$on('updatePeople', (newPeople) => {\n this.people = newPeople;\n this.$forceUpdate(); // Force the component to re-render with new data\n });\n }\n}\n</script>\n",
        "storeOutMessages": true,
        "passthru": true,
        "resendOnRefresh": true,
        "templateScope": "widget:ui",
        "className": "",
        "x": 1170,
        "y": 1000,
        "wires": [
            [
                "eeab9c04ec763ad2"
            ]
        ]
    },
    {
        "id": "eeab9c04ec763ad2",
        "type": "debug",
        "z": "7a3b4795ea906904",
        "name": "debug 394",
        "active": true,
        "tosidebar": true,
        "console": false,
        "tostatus": false,
        "complete": "true",
        "targetType": "full",
        "statusVal": "",
        "statusType": "auto",
        "x": 1350,
        "y": 1000,
        "wires": []
    },
    {
        "id": "fb4659d6be89de62",
        "type": "ui-base",
        "name": "test _2",
        "path": "/dashboard",
        "includeClientData": true,
        "acceptsClientConfig": [
            "ui-notification",
            "ui-control"
        ],
        "showPathInSidebar": true,
        "navigationStyle": "default"
    }
]

```

what i made wrong?

Thank you all!  
Emilio

---

<div class="post-metadata">

### Author: ![system](https://us1.discourse-cdn.com/flex026/uploads/nodered/original/1X/d073cd938eafa2e558d7c2cd59003b3ef4963033.png) [@system](https://discourse.nodered.org/u/system)
#### Post date: [17 September 2024 20:40 UTC](https://discourse.nodered.org/t/dashboard-2-0-and-vuetify-component-send-payload-to-it/87724/3 "2024-09-17T20:40:07Z")

</div>

This topic was automatically closed 90 days after the last reply. New replies are no longer allowed.