B4J Tutorial [BANanoVuetifyAD] vuetify.GetElementByID

Hi to all
it's probably not the right way, so I'm asking you where I'm wrong
This Sub is in pgIndex (about is another code module)

Sub btnlogOff_click(e As BANanoEvent)
    If about.login = True Then
        Dim bt As BANanoElement = vuetify.GetElementByID("btnlogOff")
        bt.SetAttr("color", "#ff0000")'<<< with about.login = True it should be #008000 (green)
       vuetify.Authenticated = False
       about.login = False
       vuetify.NavigateTo("/adlogin")
   End If
End Sub

in practice I can not change the properties of btnlogOff
Thanks to all

 

[Mashiane]

Before I answer let me give you some background information. This will help in understanding how bvad3 works as a vuejs based framework.

From the look of things you want to change the color of the button at runtime.

If you check in the User Authentication example, open the layouts for the View Home page, and look at how the dialog is defined in the properties bag, you will find our that the color of button is defined, including its label and you can change the content there via the abstract designer.

When you generate members, just like you would do in a normal b4x app, the element is added to process globals and is available to manipulate.

In the case of the BVAD3 and how it has been used for the login screen, the OK button and cancel button are internally defined elements and thus are not available in process globals. Their state bindings are done automatically when you bind the dialog box.

For BVAD3, being based on VueJS, and thus following a reactive state, you cannot change properties directly, you have to change them via the globally available state.

Each component has its own state as soon as you create a binding for that property.

In the graphic that explains why VueBindElement is important I was explaining this with btn1color, wanting to make it green.

So what we need to do is to get the internally defined button from the dialog and then change its color state.