# Uibuilder display inject value node in UI

**URL:** <https://discourse.nodered.org/t/uibuilder-display-inject-value-node-in-ui/62715>\
**Category:** Share Your Nodes\
**Tags:** uibuilder\
**Created:** [17 May 2022 00:53 UTC](https://discourse.nodered.org/t/uibuilder-display-inject-value-node-in-ui/62715 "2022-05-17T00:53:45Z")\
**Posts on this page:** 8\
**Page:** 1

<div class="post-metadata">

**Author:** ![emnabk\_12](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/emnabk_12/32/59752_2.png) [@emnabk\_12](https://discourse.nodered.org/u/emnabk_12)\
**Post date:** [17 May 2022 00:53 UTC](https://discourse.nodered.org/t/uibuilder-display-inject-value-node-in-ui/62715/1 "2022-05-17T00:53:45Z")

</div>

Hi, I want to display "cond" variable in my UI and it didn't work:  
html code:

```auto
<div id="cond">{{msg.payload.cond}}</div>

```

javaScript code:

```auto
 uibuilder.start();
    var cond = new Vue({
      el: '#cond',
      data: {
        cond: -99,
      },
      computed: {},
      methods: {},
      mounted: function() {
        var vueCond = this;
        uibuilder.onChange('msg', function(msg) {
          vueCond.cond = msg.payload.cond;
        });
      },
    });

```

---

<div class="post-metadata">

**Author:** ![TotallyInformation](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/totallyinformation/32/31_2.png) [@TotallyInformation](https://discourse.nodered.org/u/TotallyInformation)\
**Post date:** [17 May 2022 01:01 UTC](https://discourse.nodered.org/t/uibuilder-display-inject-value-node-in-ui/62715/2 "2022-05-17T01:01:43Z")

</div>

> [@emnabk\_12](#):
>
> `<div id="cond">{{msg.payload.cond}}</div>`

That isn't a Vue variable. `{{cond}}` is a vue variable.

---

<div class="post-metadata">

**Author:** ![emnabk\_12](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/emnabk_12/32/59752_2.png) [@emnabk\_12](https://discourse.nodered.org/u/emnabk_12)\
**Post date:** [17 May 2022 01:03 UTC](https://discourse.nodered.org/t/uibuilder-display-inject-value-node-in-ui/62715/3 "2022-05-17T01:03:25Z")

</div>

I tried ` {{cond}}` as well and it didn't work

console error:

```auto
script.js:109 Uncaught ReferenceError: Vue is not defined
    at script.js:109:16

```

---

<div class="post-metadata">

**Author:** ![TotallyInformation](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/totallyinformation/32/31_2.png) [@TotallyInformation](https://discourse.nodered.org/u/TotallyInformation)\
**Post date:** [17 May 2022 01:33 UTC](https://discourse.nodered.org/t/uibuilder-display-inject-value-node-in-ui/62715/4 "2022-05-17T01:33:41Z")

</div>

> [@emnabk\_12](#):
>
> `Vue is not defined`

A different error. Have you actually successfully loaded Vue.js?

---

<div class="post-metadata">

**Author:** ![emnabk\_12](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/emnabk_12/32/59752_2.png) [@emnabk\_12](https://discourse.nodered.org/u/emnabk_12)\
**Post date:** [17 May 2022 01:41 UTC](https://discourse.nodered.org/t/uibuilder-display-inject-value-node-in-ui/62715/5 "2022-05-17T01:41:53Z")

</div>

Yes Vue js worked fine I don't know what the issue was, acutally I wanted to display two values cond and pH without using Vue.It worked with the `document.getElementById("").innerHTML` function but always displays two values in one div but I want to display them separately.

When I tried to use Vue it didn't display anything at all for an unknown issue.

So I tried a different code without Vue and it worked correctly :

JavaScript code:

```auto
 uibuilder.start();
    uibuilder.onChange('msg', (msg) => {
      console.log(msg)
      document.getElementById("cond").innerHTML= msg.payload.cond;
      document.getElementById("ph").innerHTML= msg.payload.ph;
    });

```

Node-red flow: I added a join node to join two inject nodes for exemple cond and pH:

```auto
[
    {
        "id": "66dc3c4f4c95eb5d",
        "type": "inject",
        "z": "87c7469653f4fc8a",
        "name": "",
        "props": [
            {
                "p": "payload"
            },
            {
                "p": "topic",
                "vt": "str"
            }
        ],
        "repeat": "",
        "crontab": "",
        "once": false,
        "onceDelay": 0.1,
        "topic": "cond",
        "payload": "0.2",
        "payloadType": "num",
        "x": 340,
        "y": 300,
        "wires": [
            [
                "6d296ce63893d60a"
            ]
        ]
    },
    {
        "id": "9b135c70cb0f2932",
        "type": "inject",
        "z": "87c7469653f4fc8a",
        "name": "",
        "props": [
            {
                "p": "payload"
            },
            {
                "p": "topic",
                "vt": "str"
            }
        ],
        "repeat": "",
        "crontab": "",
        "once": false,
        "onceDelay": 0.1,
        "topic": "ph",
        "payload": "6",
        "payloadType": "num",
        "x": 330,
        "y": 380,
        "wires": [
            [
                "6d296ce63893d60a"
            ]
        ]
    },
    {
        "id": "6d296ce63893d60a",
        "type": "join",
        "z": "87c7469653f4fc8a",
        "name": "",
        "mode": "custom",
        "build": "object",
        "property": "payload",
        "propertyType": "msg",
        "key": "topic",
        "joiner": "\\n",
        "joinerType": "str",
        "accumulate": true,
        "timeout": "",
        "count": "2",
        "reduceRight": false,
        "reduceExp": "",
        "reduceInit": "",
        "reduceInitType": "",
        "reduceFixup": "",
        "x": 470,
        "y": 360,
        "wires": [
            [
                "70230a641cbb278e"
            ]
        ]
    }
]

```

---

<div class="post-metadata">

**Author:** ![TotallyInformation](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/totallyinformation/32/31_2.png) [@TotallyInformation](https://discourse.nodered.org/u/TotallyInformation)\
**Post date:** [17 May 2022 08:08 UTC](https://discourse.nodered.org/t/uibuilder-display-inject-value-node-in-ui/62715/6 "2022-05-17T08:08:29Z")

</div>

Without seeing the rest of your original code, I couldn't really say what the issue was. However, I always recommend starting with one of the templates. The Vue Basic template would be the one to start with if you do want to use Vue. Since that is already a working example, you only need to amend it.

But as you've seen, in many cases, it isn't really any harder to use the DOM than it is to use a framework for simple things.

---

<div class="post-metadata">

**Author:** ![emnabk\_12](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/emnabk_12/32/59752_2.png) [@emnabk\_12](https://discourse.nodered.org/u/emnabk_12)\
**Post date:** [17 May 2022 08:23 UTC](https://discourse.nodered.org/t/uibuilder-display-inject-value-node-in-ui/62715/7 "2022-05-17T08:23:13Z")

</div>

The problem is I started with a basic template of the uibuilder node, I didn't create one by myself.

---

<div class="post-metadata">

**Author:** ![TotallyInformation](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/totallyinformation/32/31_2.png) [@TotallyInformation](https://discourse.nodered.org/u/TotallyInformation)\
**Post date:** [17 May 2022 08:30 UTC](https://discourse.nodered.org/t/uibuilder-display-inject-value-node-in-ui/62715/8 "2022-05-17T08:30:12Z")

</div>

OK, but the code you started with was the Basic template and not the Vue Simple template which sets up Vue and bootstrap-vue for you.