Retrieving data from Vuetify components in dashboard

Dashboard
1

The documentation for Vuetify components gives examples which we can include in a ui-template.

This is one of the examples for the star rating component

<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

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

2

Check out what events a component has update:modelValue

Since it only has one...

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

and in full...

<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>
3

Thanks Steve but I still don't see the output in Node-red. What am I missing?
This is what I have:
image

<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>
4

Odd. that event works in the vuetify playground!

Try a watch if all else fails...

<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>
5

Yes that works thanks :smiley: