Uibuilder - Declaration of Each Input in Data

Dashboard
1

I am taking the plunge into Ui-Builder and from most of the templates and example's out here I managed to get something resembling a dash going but I want to check some thing.
in the Index.js file variables is linked via " data: {} "

  data: {
       tab_txt: null,
       switch1: false,
       switch2:false, 
 }

This referes to the .html file

"v-model="switch1" , 
"v-model="switch2" , 
"v-html="tab_txt"

Im my case if I recive a TXT payload , like sensor data , it will be sent to tab_txt all works ok BUT
is it necessary to "declare" each variable in data {} or is there a easier way to make a global declaration?
I know that if I do not create a variable in data it will not update in the html page but does that then mean that I have to declare each TXT value separately in the .js file?
I hope this all makes sense - thanks fo the Hard Work!!

2

There are probably workarounds but in simple terms, this is how vue does binding. You need to specify the item to bind to & for that item to be reactive, it needs to exist.

1 Like
3

Cool thank you , I was just afraid I am doing it wrong :stuck_out_tongue:

1 Like
4

Congratulations! And welcome to many hours of happy tinkering :rofl:

If you do not declare a variable in the data section, you don't get a responsive variable. There are ways to later decalre such things but it isn't generally woth the hassle. And isn't really recommended as a matter of course. This is certainly the easiest way.

However, don't forget that you can declare object variables not just simple ones. Here the trick is to pre-define the "shape" of the object in the data section:

myobj: {
   property1: null,
   property2: '',
   property3: false,
},

That way, VueJS knows the shape and will deal with the properties dynamically. If there is a property that, for some odd reason, you don't know up front, you have to use a special VueJS function later to change the object so that VueJS knows that the property should be responsive. Details in the VueJS docs.

A pleasure! Just been trying to work again on the security model - what a PITA that is! Slow going.

MUCH more to come for uibuilder though and you are joining the crowd at a great time. Check ou the project board for what is coming along:

To Do (github.com)

5

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