Uibuilder display inject value node in UI

Share Your Nodes
1

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

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

javaScript code:

 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;
        });
      },
    });
2

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

3

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

console error:

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

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

5

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:

 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:

[
    {
        "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"
            ]
        ]
    }
]
6

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.

7

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

8

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.

1 Like