I hear you and understand and there is something that I think I'm not able to get about this
vjsf library im trying to use. I am
not assigning any
object to attributes directly.
As an example, these are the steps that I make all the BVAD3 apps.
Step 1: Create the HTML using BANanoElement -
this works. For example, if we wanted to create a container with a row and button. We could create the HTML code like this.
<v-app id="app"><v-main id="vmain"><v-container id="container"><v-form id="vform" v-model="valid" ref="vform"></v-form><v-row id="r1" class="mt-2"><v-btn id="btn1"
:color="btncolor" v-on:click="btn1_click">Validate</v-btn></v-row></v-container></v-main></v-app>
Step 2: Set states (if available) -
this works, for any "bound" component, when VueJS compiles it and during runtime, the states can be changed.
For example, above we have bound the color to a btncolor state variable, with :color="btncolor". To change the color of the button at runtime, we can just execute..
Dim btnColor As String = "red"
VueApp.SetData("btncolor", btnColor)
This produces.
If we want to change the color to green, we could execute VueAPp.SetData("btncolor', "green") also. This works and is perfectly acceptable with BANAno and Vuetify. Because I have assigned a click event to the button, I have to define it as
Sub btn1_click(e As BANanoEvent)
'log the refs...")
Log(VueApp.refs)
End Sub
The click event is bound with
v-on:click="btn1_click"
In all these cases, everything works without hurdles.
The issue is for some reason this vjsf library. In this case, an "object" is assigned to the state variable. Looking at the button code above, I am doing a similar thing with vjsf. Let me change this a little bit for more clarity.
Step 1 - Build html
I follow the same approach, I build the html using BANanoElement - this works
<v-jsf id="vjsf"
:schema="vjsfschema">
So same rules apply. The bound attribute is :schema="vjsfschema" as an example.
Step 2- Assign States, before we were assigning a "red" string. This time we build a map called "vjsfschema"
This is VueApp.SetData("vjsfschema", schema), where the schema map is defined like below. So we are assigning a binding the variable.
I build the schema
{
"type": "object",
"properties": {
"stringProp": {
"type": "string",
"title": "I'm a string",
"description": "This description is used as a help message."
},
"stringTextAreaProp": {
"type": "string",
"title": "I'm a string in a textarea",
"description": ""
},
"numberProp": {
"type": "number",
"title": "I'm a number",
"description": ""
},
"integerProp": {
"type": "integer",
"title": "I'm an integer",
"description": ""
},
"integerSliderProp": {
"type": "integer",
"title": "I'm an integer in a slider",
"description": ""
},
"booleanProp": {
"type": "boolean",
"title": "I'm a boolean",
"description": "This description is used as a help message."
},
"booleanSwitchProp": {
"type": "boolean",
"title": "I'm a boolean with switch display",
"description": "The description is used as a help message"
},
"stringArrayProp": {
"type": "array",
"title": "I'm an array of strings",
"description": ""
},
"integerArrayProp": {
"type": "array",
"title": "I'm an array of integers",
"description": ""
}
}
}
Then I complete the process with..
VueApp.SetData("vjsfschema", schema)
As you can see, I am not doing anything new from what I have not done before where "it worked". For some reason this time around, it does not want to budge.
I'm probably doing something wrong sowhere.
Thanks for your time anyway.[/code]