In addition, the documentation keeps improving while time passes too. Call it early adaptor issues 
Thanks to all your help and my persistence I have something working. I can imagine when starting to implement event binding and if/else, a lot of heavy lifting will be done by vue, saves quite some work.
My working example, yay 
html
<device-component v-for="device in devices" :device="device" />
index.js
let devices = [
{
topic: 'devices/kleine_kamer/fan',
room: 'Kleine Kamer',
device: 'fan',
state: '-',
statevalue: '-',
},
{
topic: 'devices/woonkamer/lamp',
room: 'Woonkamer',
device: 'lamp',
state: '-',
statevalue: '-',
},
];
Vue.component('device-component', {
template: `
<div class="item" :class="device.state">
<span class="icon" ><img :class="device.state" src="images/fan.svg" /></span>
<span class="room">{{device.room}}</span>
<span class="device">{{device.device}}</span>
<span class="statevalue">{{ device.statevalue }}</span>
</div>
`,
props: {
device: Object,
},
});
var app1 = new Vue({
el: '#app',
components: {},
data: {
devices,
},
computed: {},
methods: {},
mounted: function() {
uibuilder.start();
var vueApp = this;
uibuilder.onChange('msg', function(msg) {
if (msg.topic !== 'uibuilder') {
topic = msg.topic.split('/');
room = topic[1];
device = topic[2];
index = devices.findIndex(x => x.topic === msg.topic);
vueApp.devices[index].state = msg.state;
vueApp.devices[index].statevalue = msg.statevalue;
}
});
},
});
Still have to define all elements, but can live with that.
When I send something with a certain topic, the right element gets updated with a custom class. Cool stuff, still don't understand how it works, but as long as it is functional I can work from there 
My plan for today and the next days is to build a quite advanced example/showcase of this, showing about the edges of what is possible without a build step such as webpack. With a build step this goes even beyond. Just worked out a quick functional design on paper, will post a showcase for it in a few days.
Personally I need simple examples haha but thanks!
Got a little further, can now load the "devices" upon refresh/connect of the browser, it sends an array. If I understand correctly, the reactivity will be applied when using methods and indeed it seems to work fine.
var app1 = new Vue({
el: '#app',
components: {},
data: { devices },
computed: {},
methods: {
updateArray() {
this.devices = msg.payload;
},
updateState() {
topic = msg.topic.split('/');
room = topic[1];
device = topic[2];
index = this.devices.findIndex(x => x.topic === msg.topic);
this.devices[index].state = msg.state;
this.devices[index].statevalue = msg.statevalue;
},
},
mounted: function() {
uibuilder.start();
var vueApp = this;
uibuilder.onChange('msg', function(msg) {
if (msg.topic !== 'uibuilder' && msg.topic !== 'deviceArray') {
vueApp.updateState(msg);
}
if (msg.topic == 'deviceArray') {
vueApp.updateArray();
}
});
},
});
*edit fixed it with v-bind:data="devices" v-bind:key="device.device"
1 Like
@bakman2 Quick question for a potential bug:
the updateState you defined does not take any parameters, yet you pass on message. In the updateState function you then use msg as if it was passed as parameter. To fix this, add a parameter msg to the updateState function definition:
The same holds true for vueApp.updateArray(), except here msg isn't even passed, yet still used in the actual function.
You might see this reflected in errors on the javascript console.
Definitely looking good though! The thing I'm currently working on has a similar concept for setting the devices.
You are correct, it is some scaffolding which can and will introduce errors, right the first time is better. Fixed.
Now working on click bindings, fingers crossed.
As Nick & Dave would say: PR's are always welcome!
As much is documented in the WIKI and the WIKI is open to all to edit, that is even easier! Though I am beginning to think that I might be pushing the WIKI a bit hard. It is certainly a massive pain to maintain the sidebar menu. I think at some point, I may have to bite the bullet and use Hugo to create a website.
I'm in the middle of creating 2 other websites at the moment though so as usual I am probably getting ahead of myself.
In that case, take a look at readthedocs.org, or docs using gitbook like is more popular with JavaScript libraries. ReadTheDocs is static hosting of Sphinx based documentation, where the docs live in the repository and the hosted version can be rebuild with an outgoing github webhook upon a push. Gitbook got an update recently that Iām not sure how to feel about yet as it looks as if youāre now relying completely on their web interface to update/edit your docs.
I'm ahead of you there Lena - for once:
https://totallyinformation.github.io/node-red-contrib-uibuilder/#/
It's just that I've not had a chance to really get things going. I'd also need to find a way to link existing WIKI pages to the new site so that all of the WIKI references scattered around this forum, the uibuilder repo and elsewhere don't end up as 404's.
1 Like
