# Retrieving data from Vuetify components in dashboard

**URL:** https://discourse.nodered.org/t/retrieving-data-from-vuetify-components-in-dashboard/90671
**Category:** Dashboard
**Tags:** dashboard-2
**Created:** [3 September 2024 06:52 UTC](https://discourse.nodered.org/t/retrieving-data-from-vuetify-components-in-dashboard/90671 "2024-09-03T06:52:23Z")
**Posts on this page:** 6
**Page:** 1

<div class="post-metadata">

### Author: ![jbudd](https://avatars.discourse-cdn.com/v4/letter/j/5f8ce5/32.png) [@jbudd](https://discourse.nodered.org/u/jbudd)
#### Post date: [3 September 2024 06:52 UTC](https://discourse.nodered.org/t/retrieving-data-from-vuetify-components-in-dashboard/90671/1 "2024-09-03T06:52:23Z")

</div>

The [documentation for Vuetify components](https://vuetifyjs.com/en/components/all/) gives examples which we can include in a ui-template.

This is one of the examples for the star rating component

```auto
<template>
  <div class="text-center">
    <v-rating v-model="rating" active-color="blue" color="orange-lighten-1"></v-rating>
  </div>
</template>
<script>
  export default {
    data: () => ({ rating: 3 }),
  }
</script>

```

And here is the result in the dashboard  
 ![image](https://us1.discourse-cdn.com/flex026/uploads/nodered/original/3X/d/0/d0baa89633ddca7bfa73cf6ad9a27b4fe3657db4.png)

But how do we get the user's input back into Node-red? Just wiring up a debug node to the template shows nothing.

---

<div class="post-metadata">

### Author: ![Steve-Mcl](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/steve-mcl/32/4826_2.png) [@Steve-Mcl](https://discourse.nodered.org/u/Steve-Mcl)
#### Post date: [3 September 2024 07:00 UTC](https://discourse.nodered.org/t/retrieving-data-from-vuetify-components-in-dashboard/90671/2 "2024-09-03T07:00:10Z")

</div>

Check out what events a component has [update:modelValue](https://vuetifyjs.com/en/api/v-rating/#events-update:modelValue)

Since it only has one...

```auto
@update:modelValue="send({payload:rating})"

```

and in full...

```auto
<template>
  <div class="text-center">
    <v-rating v-model="rating" active-color="blue" color="orange-lighten-1" @update:modelValue="send({payload:rating})"></v-rating>
  </div>
</template>

```

---

<div class="post-metadata">

### Author: ![jbudd](https://avatars.discourse-cdn.com/v4/letter/j/5f8ce5/32.png) [@jbudd](https://discourse.nodered.org/u/jbudd)
#### Post date: [3 September 2024 07:10 UTC](https://discourse.nodered.org/t/retrieving-data-from-vuetify-components-in-dashboard/90671/3 "2024-09-03T07:10:51Z")

</div>

Thanks Steve but I still don't see the output in Node-red. What am I missing?  
This is what I have:  
 ![image](https://us1.discourse-cdn.com/flex026/uploads/nodered/original/3X/c/4/c4777e14cd0a45c961f2cd233fdec10ae6f5087d.png)

```auto
<template>
  <div class="text-center">
    <v-rating v-model="rating" active-color="blue" color="orange-lighten-1" @update:modelValue="send({payload:rating})">
    </v-rating>
  </div>
</template>
<script>
  export default {
    data: () => ({ rating: 3 }),
  }
</script>

```

---

<div class="post-metadata">

### Author: ![Steve-Mcl](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/steve-mcl/32/4826_2.png) [@Steve-Mcl](https://discourse.nodered.org/u/Steve-Mcl)
#### Post date: [3 September 2024 07:25 UTC](https://discourse.nodered.org/t/retrieving-data-from-vuetify-components-in-dashboard/90671/4 "2024-09-03T07:25:26Z")

</div>

Odd. that event works in the vuetify playground!

Try a watch if all else fails...

```auto
<template>
    <div class="text-center">
        <v-rating v-model="rating" active-color="blue" color="orange-lighten-1">
        </v-rating>
    </div>
</template>
<script>
    export default {
        data: () => ({ rating: 3 }),
        watch: {
            rating: function () {
                this.send({payload: this.rating})
            }
        }
    }
</script>

```

---

<div class="post-metadata">

### Author: ![jbudd](https://avatars.discourse-cdn.com/v4/letter/j/5f8ce5/32.png) [@jbudd](https://discourse.nodered.org/u/jbudd)
#### Post date: [3 September 2024 07:38 UTC](https://discourse.nodered.org/t/retrieving-data-from-vuetify-components-in-dashboard/90671/5 "2024-09-03T07:38:39Z")

</div>

Yes that works thanks 😃

---

<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 07:38 UTC](https://discourse.nodered.org/t/retrieving-data-from-vuetify-components-in-dashboard/90671/6 "2024-09-17T07:38:58Z")

</div>

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