Allow for more quasar vue properties to be bound to observable parameters in the model

Hope you’re doing well @hhaensel :slight_smile:

It’s really useful to bind properties of quasar-vue components to model parameters. More specifically, how do I disable a button with an observable:

button("Save", @click("save=true"), disable = :disable_save)

where disable_save is a parameter in the model. My goal is to allow the user to save if and only if some conditions are met…

That should do it. Didn’t you try?

I thought so too. No, it didn’t work. But I’ll try it again, just to be 110% sure.

Yea, it doesn’t work… MWE:

using Stipple, StippleUI
using Genie.Renderer.Html

Base.@kwdef mutable struct JSmethods <: ReactiveModel
    save::R{Bool} = false
    disable_save::R{Bool} = false

function restart()
    global model
    model = Stipple.init(JSmethods(), debounce=1)

function ui()
    app = dashboard(vm(model),
         row(cell(class="st-module", [
                                      p(button("Save", @click("save=true"), disable = :disable_save)),
        ], title = "jsmethods")


route("/", ui)
Genie.config.server_host = ""
up(open_browser = true)

if you try

julia> model.disable_save[] = true

Observable{Bool} with 1 listeners. Value:

and then press on the Save button, you’ll see that:

Observable{Bool} with 1 listeners. Value:

It’s a typo, should be disabled=:disable_save

Ah… Just FYI, in the docs Button | Quasar Framework it says disable:

And you are right, works on my side.

It’s because you use button and not btn, see also here

Oh, should I be using btn instead? What’s the difference?

The first one is a native html element, the latter one is a quasar component. I would always use quasar components, as their layout is far superior (e.g. greyed when disabled) and better customisable.

1 Like

Thank you, will do too.