# Send data to vuetify element

**URL:** <https://discourse.nodered.org/t/send-data-to-vuetify-element/87833>\
**Category:** Dashboard\
**Tags:** node-red-dashboard, flowfuse\
**Created:** [9 May 2024 09:10 UTC](https://discourse.nodered.org/t/send-data-to-vuetify-element/87833 "2024-05-09T09:10:57Z")\
**Posts on this page:** 3\
**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:** [9 May 2024 09:10 UTC](https://discourse.nodered.org/t/send-data-to-vuetify-element/87833/1 "2024-05-09T09:10:57Z")

</div>

Hi there!!!  
I have this node, a vuetify switch element:

```auto
[
    {
        "id": "57b22788516ec087",
        "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 <v-dialog\n width=\"auto\"\n scrollable\n >\n <template v-slot:activator=\"{ props: activatorProps }\">\n <v-btn\n color=\"brown\"\n prepend-icon=\"mdi-earth\"\n text=\"Selezione singola\"\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-5\" style=\"height: 300px;\">\n \n <p>{{ people }}</p>\n <v-switch\n v-model=\"people\"\n color=\"primary\"\n label=\"Mark\"\n value=\"Mark\"\n hide-details\n ></v-switch>\n <v-switch\n v-model=\"people\"\n color=\"primary\"\n label=\"Karl\"\n value=\"Karl\"\n hide-details\n ></v-switch>\n <v-switch\n v-model=\"people\"\n color=\"primary\"\n label=\"Frank\"\n value=\"Frank\"\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": 170,
        "y": 540,
        "wires": [
            [
                "ad2f9c244e91400e"
            ]
        ]
    },
    {
        "id": "fb4659d6be89de62",
        "type": "ui-base",
        "name": "test _2",
        "path": "/dashboard",
        "includeClientData": true,
        "acceptsClientConfig": [
            "ui-notification",
            "ui-control"
        ],
        "showPathInSidebar": true,
        "navigationStyle": "default"
    }
]

```

now i have created a csv file with the names (John, Sean, etc.) and i want send it to the Vuetify switch element and change them.

How can i do it?

Thanks  
Emilio

---

<div class="post-metadata">

**Author:** ![gdziuba](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/gdziuba/32/81398_2.png) [@gdziuba](https://discourse.nodered.org/u/gdziuba)\
**Post date:** [21 May 2024 13:13 UTC](https://discourse.nodered.org/t/send-data-to-vuetify-element/87833/2 "2024-05-21T13:13:00Z")

</div>

Interesting usecase. Adding details below to see if someone can assist.

 ![image](https://us1.discourse-cdn.com/flex026/uploads/nodered/original/3X/1/3/136617151f71ccb5f90ce44e10a6c951f9c6518a.png)

UI Template Node:

```auto
<template>
  <div class="pa-4 text-center">
    <v-dialog
      width="auto"
      scrollable
    >
      <template v-slot:activator="{ props: activatorProps }">
        <v-btn
          color="brown"
          prepend-icon="mdi-earth"
          text="Selezione singola"
          variant="outlined"
          v-bind="activatorProps"
        ></v-btn>
      </template>

      <template v-slot:default="{ isActive }">
        
        <v-card fluid>
           <v-card-text class="px-5" style="height: 300px;">
            
    <p>{{ people }}</p>
    <v-switch
      v-model="people"
      color="primary"
      label="Mark"
      value="Mark"
      hide-details
    ></v-switch>
    <v-switch
      v-model="people"
      color="primary"
      label="Karl"
      value="Karl"
      hide-details
    ></v-switch>
     <v-switch
      v-model="people"
      color="primary"
      label="Frank"
      value="Frank"
      hide-details
    ></v-switch>
    <v-divider></v-divider>

          <v-card-actions>
            <v-btn
              text="Close"
              @click="isActive.value = false"
            ></v-btn>

            <v-spacer></v-spacer>

            <v-btn
              color="surface-variant"
              text="Save"
              variant="flat"
              @click="isActive.value = false"
            ></v-btn>
  </v-card>
</template>
</template>
<script>
  export default { data () {
      return {
         people: "",
      }
    },
   watch: {
           
        people: function () {
                
                    this.send({payload: this.people})
                }
   }
  }
</script>

```

At the time of writing this, the Vuetify website is down. I will take a look when it is back up. Maybe @joepavitt has some thoughts.

---

<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:** [20 June 2024 13:13 UTC](https://discourse.nodered.org/t/send-data-to-vuetify-element/87833/3 "2024-06-20T13:13:28Z")

</div>

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