# Uibuilder: to subscribe or not to subscribe?

**URL:** <https://discourse.nodered.org/t/uibuilder-to-subscribe-or-not-to-subscribe/43136>\
**Category:** Dashboard\
**Created:** [24 March 2021 17:28 UTC](https://discourse.nodered.org/t/uibuilder-to-subscribe-or-not-to-subscribe/43136 "2021-03-24T17:28:06Z")\
**Posts on this page:** 1\
**Showing post:** 48

<div class="post-metadata">

**Author:** ![tve](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/tve/32/59475_2.png) [@tve](https://discourse.nodered.org/u/tve)\
**Post date:** [1 May 2021 18:20 UTC](https://discourse.nodered.org/t/uibuilder-to-subscribe-or-not-to-subscribe/43136/48 "2021-05-01T18:20:58Z")

</div>

Well, sometimes you have to do it all wrong and come full circle 🙂

I went back to almost what @TotallyInformation has: messages contain property values that are just pushed into the components. I had changed this to a message dispatch where components contain a handler method that is called with the message. I had the linkage using the same `ref=` property as @TotallyInformation's examples have.

The reason I went back is that in Vue updating values should happen through properties and through the general "reactivity". Sending messages around or calling handler methods just goes around this and thus ends up clashing. In @TotallyInformation's examples the clash comes from vue complaining that props are being updated directly. Going back to using the reactivity mechanism properly reduced my code size significantly, everything is now so simple.

So what I ended up with is:

- the app main (index.js) contains a `nr` data, which holds all data that has come in from node-red (hence "nr").
- when a message comes in, it must have a topic and a payload, the message is simply stored as `nr[msg.topic] = msg.payload` (technically I have to use `Vue.set`, but that's insignificant).
- the page html instantiates components and for components that need to get data from node-red the appropriate portions of the `nr` data are bound to the component's props using the standard Vue `v-bind`

And that's it, couldn't be simpler!

### simple example

Simple example: a stat component that shows a title, a value, and a units string.

- the component has 3 properties: title, unit, value
- the page html instantiates the component and binds the value for updating like this:

```auto
    <stat title="bedroom" unit="°F" v-bind:value="nr.bedroom_temperature"></stat>

```

- the NR flow sends a message to the page to update the temperature like this:

```auto
    { topic: "bedroom_temperature", payload: 77 }

```

- the result:  
 ![image](https://us1.discourse-cdn.com/flex026/uploads/nodered/original/3X/d/c/dc3a08ae5442e2fefef051cc60b003d7d0b82ae4.png)

### array example

A more complex example has an array component that expects an array of title/unit/value objects and generates an array of stat components for all those values:

- the array component has some properties, including `array` (in this example there's no other property, but there could be in the future)
- the page html instantiates the array component and provides the template for the stat component as follows:

```auto
    <array v-bind="nr.temperature_array">
      <template v-slot:default="slotProps">
        <stat v-bind="slotProps"></stat>
      </template>
    </array>

```

the `v-bind`s used here bind all properties of the component, as opposed to the `v-bind:value` used above that only bound the `value` property

- the message sent from node-red looks as follows:

```auto
    { topic: "temperature_array",
      payload: {
        array: [
          { title: "bedroom", unit: "°F", value: "75" },
          { title: "living room", unit: "°F", value: "72" },
          ...,
    ]}}

```

In this case, the `array` property of the message payload updates the property of the same name in the array component.

- the result:  
 ![image](https://us1.discourse-cdn.com/flex026/uploads/nodered/original/3X/5/f/5fa92d2182349fcc384ef3df83b3011a39dad20b.png)

* * *

I uploaded the whole thing I have to [GitHub - tve/uibuilder-test: Node-Red Test Dashboard using uibuilder](https://github.com/tve/uibuilder-test) in case someone wants to take a peek...

---

_[View the full topic](https://discourse.nodered.org/t/uibuilder-to-subscribe-or-not-to-subscribe/43136)._