# How to do two way binding

**URL:** <https://discourse.nodered.org/t/how-to-do-two-way-binding/85490>\
**Category:** Dashboard\
**Tags:** dashboard-2\
**Created:** [13 February 2024 14:50 UTC](https://discourse.nodered.org/t/how-to-do-two-way-binding/85490 "2024-02-13T14:50:09Z")\
**Posts on this page:** 8\
**Page:** 1

<div class="post-metadata">

**Author:** ![nr\_luna\_mw](https://avatars.discourse-cdn.com/v4/letter/n/d6d6ee/32.png) [@nr\_luna\_mw](https://discourse.nodered.org/u/nr_luna_mw)\
**Post date:** [13 February 2024 14:50 UTC](https://discourse.nodered.org/t/how-to-do-two-way-binding/85490/1 "2024-02-13T14:50:09Z")

</div>

Good day jwj001,  
I created a template node for a separated button. It should be a combo button including a v-btn for changing the page and activating dynamic content. The other component is a switch for smart-home control. The goal is to be able to control the power state of a specific lamp without entering the settings page of the device. The data is provided by iobroker.

```auto
<div class="so-bs-grid-container">
    <v-btn class="so-bs-button" @click="send({payload: provideData(value) })">
        Testgerät
    </v-btn>
    <v-switch class="so-bs-switch" v-model="msg.payload"
        active-color="primary"
        color="primary"
        inset 
        @update:modelValue="send({payload: provideSwitchData(msg.payload) })">
    </v-switch>
</div>

<script>
    export default {
        data() {
            // define variables available component-wide
            // (in <template> and component functions)            
            return {
                topic: "alias.0.devices.lights.CompLgt-OG-AZ.General",
            }
        },
        methods: {
            provideData: function () {
                var message = {
                    scope: "button",
                    title: "< OG: Beleuchtung",
                    page: "lightcontrol.rgb",
                    topic: this.topic,
                };
                return message;
            },
            provideSwitchData: function (switchValue) {
                var message = {
                    scope: "switch",
                    topic: this.topic + ".Control.ONOFF",
                    value: switchValue,
                };
                return message;
            },
        },
    }
</script>

```

Now the problem is that I can inject the message payload, but if I create a dynamic v-model using the msg.payload, I am not able to define a standard value for it in the data section.  
If I try to create a property binding, the application crashes.  
How can I define a two-way binding according to a message input and make sure that the latest value of the switch persists, even if I send a message due to a click on the button in the same widget?

---

<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:** [13 February 2024 16:03 UTC](https://discourse.nodered.org/t/how-to-do-two-way-binding/85490/2 "2024-02-13T16:03:28Z")

</div>

@nr_luna_mw I moved your question to its own thread (as far as i could tell, it was a new question and unrelated to the original question)

---

<div class="post-metadata">

**Author:** ![nr\_luna\_mw](https://avatars.discourse-cdn.com/v4/letter/n/d6d6ee/32.png) [@nr\_luna\_mw](https://discourse.nodered.org/u/nr_luna_mw)\
**Post date:** [23 February 2024 08:33 UTC](https://discourse.nodered.org/t/how-to-do-two-way-binding/85490/3 "2024-02-23T08:33:59Z")

</div>

Does anyone have a solution regarding to this problem?

---

<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:** [29 February 2024 08:37 UTC](https://discourse.nodered.org/t/how-to-do-two-way-binding/85490/4 "2024-02-29T08:37:13Z")

</div>

If I'm understanding correctly, you can use a variable called `value`, then `watch ()` on `msg.payload` for changes. When that changes, update value.

```auto
<div class="so-bs-grid-container">
    <v-btn class="so-bs-button" @click="send({payload: provideData(value) })">
        Testgerät
    </v-btn>
    <v-switch class="so-bs-switch" v-model="value"
        active-color="primary"
        color="primary"
        inset 
        @update:modelValue="send({payload: provideSwitchData(msg.payload) })">
    </v-switch>
</div>

<script>
    export default {
        data() {
            // define variables available component-wide
            // (in <template> and component functions)            
            return {
                value: null,
                topic: "alias.0.devices.lights.CompLgt-OG-AZ.General",
            }
        },
        watch: {
            'msg.payload': function (payload) {
                 this.value = payload
            }
        },
        methods: {
            provideData: function () {
                var message = {
                    scope: "button",
                    title: "< OG: Beleuchtung",
                    page: "lightcontrol.rgb",
                    topic: this.topic,
                };
                return message;
            },
            provideSwitchData: function (switchValue) {
                var message = {
                    scope: "switch",
                    topic: this.topic + ".Control.ONOFF",
                    value: switchValue,
                };
                return message;
            },
        },
    }
</script>

```

I haven't tested this, but that _should_ do the trick

---

<div class="post-metadata">

**Author:** ![nr\_luna\_mw](https://avatars.discourse-cdn.com/v4/letter/n/d6d6ee/32.png) [@nr\_luna\_mw](https://discourse.nodered.org/u/nr_luna_mw)\
**Post date:** [29 February 2024 22:34 UTC](https://discourse.nodered.org/t/how-to-do-two-way-binding/85490/5 "2024-02-29T22:34:59Z")

</div>

Hello joepavitt, thank you,  
unfortunately it does not work yet, because obviously  
the scope.$watch('msg.payload', function(data) way  
seems not to be the same like the wrapper function "watch:" in the vue.js context.

I also tried to only watch the whole msg object, but it does not seem to work.  
Using the scope.$watch will cause that the switch is able to react to the incoming message value, but then I am unable to control the switch manually. It won´t send any message, if I click on it.

---

<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:** [1 March 2024 09:19 UTC](https://discourse.nodered.org/t/how-to-do-two-way-binding/85490/6 "2024-03-01T09:19:24Z")

</div>

```auto
<template>
    <div>Template Content Here</div>
</template>

<script>
    export default {
        watch: {
            msg: function () {
                console.log('input has arrived', this.msg)
            }
        }
    }
</script>

```

Here is a working example, tested locally. Needed to watch the full `msg` object, rather than just the `msg.payload`

---

<div class="post-metadata">

**Author:** ![nr\_luna\_mw](https://avatars.discourse-cdn.com/v4/letter/n/d6d6ee/32.png) [@nr\_luna\_mw](https://discourse.nodered.org/u/nr_luna_mw)\
**Post date:** [1 March 2024 16:36 UTC](https://discourse.nodered.org/t/how-to-do-two-way-binding/85490/7 "2024-03-01T16:36:29Z")

</div>

Yes, perfect. This solved the problem.  
Thanks a lot.

---

<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:** [15 March 2024 16:37 UTC](https://discourse.nodered.org/t/how-to-do-two-way-binding/85490/8 "2024-03-15T16:37:02Z")

</div>

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