# Listen to input on dashboard 2 ui-template

**URL:** <https://discourse.nodered.org/t/listen-to-input-on-dashboard-2-ui-template/85545>\
**Category:** Dashboard\
**Tags:** dashboard-2\
**Created:** [15 February 2024 04:43 UTC](https://discourse.nodered.org/t/listen-to-input-on-dashboard-2-ui-template/85545 "2024-02-15T04:43:39Z")\
**Posts on this page:** 10\
**Page:** 1

<div class="post-metadata">

**Author:** ![Waz](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/waz/32/64482_2.png) [@Waz](https://discourse.nodered.org/u/Waz)\
**Post date:** [15 February 2024 04:43 UTC](https://discourse.nodered.org/t/listen-to-input-on-dashboard-2-ui-template/85545/1 "2024-02-15T04:43:39Z")

</div>

Hi,  
I have a vuetify based radio button set. 3 Buttons. They output the state fine but I can't get them to change state given on input. I'd like to save all of the states to a database and then when DB2 fires up, it get's initialised from the database.  
This is the code I have so far:

```auto
<template>
  <v-container fluid>
    <v-radio-group v-model="status" inline label="Search">
      <v-radio label="Not Started" value="notStarted"></v-radio>
      <v-radio label="Started" value="started" color="orange"></v-radio>
      <v-radio label="Complete" value="complete" color="green"></v-radio>
    </v-radio-group>
  </v-container>
</template>

<script>
export default {
  data() {
    return {
      //label: 'Search',
      status: ''
    };
  },
  watch: {
    status(newValue) {
      this.send({ payload: newValue });
    }
  },
};
</script>

```

I am aware that there is nothing in here to listen to the input. I have tried many things and GPT4 is not going to replace us all yet, I can confirm that..

---

<div class="post-metadata">

**Author:** ![hotNipi](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/hotnipi/32/383_2.png) [@hotNipi](https://discourse.nodered.org/u/hotNipi)\
**Post date:** [15 February 2024 05:39 UTC](https://discourse.nodered.org/t/listen-to-input-on-dashboard-2-ui-template/85545/2 "2024-02-15T05:39:12Z")

</div>

The multistate switch prototype is built with input listened by watch msg. See the code to figure out your solution. [Dashboard 2 - Multi-state switch - #24 by hotNipi](https://discourse.nodered.org/t/dashboard-2-multi-state-switch/85168/24)

---

<div class="post-metadata">

**Author:** ![Waz](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/waz/32/64482_2.png) [@Waz](https://discourse.nodered.org/u/Waz)\
**Post date:** [15 February 2024 06:09 UTC](https://discourse.nodered.org/t/listen-to-input-on-dashboard-2-ui-template/85545/3 "2024-02-15T06:09:29Z")

</div>

That does indeed work. It's just going to take me a while to understand it. I might have to re-employ GPT4 to do that.  
Awesome work, thank you.

---

<div class="post-metadata">

**Author:** ![hotNipi](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/hotnipi/32/383_2.png) [@hotNipi](https://discourse.nodered.org/u/hotNipi)\
**Post date:** [15 February 2024 06:26 UTC](https://discourse.nodered.org/t/listen-to-input-on-dashboard-2-ui-template/85545/4 "2024-02-15T06:26:28Z")

</div>

Just don't trust any gpt. Trust yourself by trusting your ability to achieve by learning.

---

<div class="post-metadata">

**Author:** ![joepavitt](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/joepavitt/32/59722_2.png) [@joepavitt](https://discourse.nodered.org/u/joepavitt)\
**Post date:** [15 February 2024 08:50 UTC](https://discourse.nodered.org/t/listen-to-input-on-dashboard-2-ui-template/85545/5 "2024-02-15T08:50:29Z")

</div>

The core missing piece you're looking for is:

```js
watch: {
    msg: function(){        
        // do stuff with msg.payload
    },
}

```

This will run the relevant functionality when a new message is received, in your case, you could run `this.status = msg.payload`

---

<div class="post-metadata">

**Author:** ![joepavitt](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/joepavitt/32/59722_2.png) [@joepavitt](https://discourse.nodered.org/u/joepavitt)\
**Post date:** [15 February 2024 08:52 UTC](https://discourse.nodered.org/t/listen-to-input-on-dashboard-2-ui-template/85545/6 "2024-02-15T08:52:26Z")

</div>

If you then don't want the node to emit on first load due to your watch on `status`, you could utilise the second argument of the `watch` which is `oldValue`, check if that `oldValue` was equal to `''`, and if it was, don't emit via `send()`

---

<div class="post-metadata">

**Author:** ![Waz](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/waz/32/64482_2.png) [@Waz](https://discourse.nodered.org/u/Waz)\
**Post date:** [16 February 2024 00:23 UTC](https://discourse.nodered.org/t/listen-to-input-on-dashboard-2-ui-template/85545/7 "2024-02-16T00:23:06Z")

</div>

Is it possible to read a flow variable when the component is mounted?  
Something like:

```auto
mounted() {
  this.status = flow.myVar
  },

```

---

<div class="post-metadata">

**Author:** ![joepavitt](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/joepavitt/32/59722_2.png) [@joepavitt](https://discourse.nodered.org/u/joepavitt)\
**Post date:** [16 February 2024 08:33 UTC](https://discourse.nodered.org/t/listen-to-input-on-dashboard-2-ui-template/85545/8 "2024-02-16T08:33:31Z")

</div>

Unfortunately, because this is client-side, we don't have access to `flow` or `global`. We only send `msg` over the websocket connection. The best option here is to have `change` node prior to this node, and set a `msg.<something>` to the relevant `flow.` or `global.` variable.

---

<div class="post-metadata">

**Author:** ![Waz](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/waz/32/64482_2.png) [@Waz](https://discourse.nodered.org/u/Waz)\
**Post date:** [16 February 2024 08:39 UTC](https://discourse.nodered.org/t/listen-to-input-on-dashboard-2-ui-template/85545/9 "2024-02-16T08:39:51Z")

</div>

Yep, makes sense. Thank you 👍

---

<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:** [1 March 2024 08:40 UTC](https://discourse.nodered.org/t/listen-to-input-on-dashboard-2-ui-template/85545/10 "2024-03-01T08:40:38Z")

</div>

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