Listen to input on dashboard 2 ui-template

Dashboard
1

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:

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

2

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

3

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.

4

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

2 Likes
5

The core missing piece you're looking for is:

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

2 Likes
6

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()

1 Like
7

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

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

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.

9

Yep, makes sense. Thank you :+1:

10

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