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

Specific Domains Web Stack
1

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…

2

That should do it. Didn’t you try?

3

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

4

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
end

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

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

    html(app)
end

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

if you try

julia> model.disable_save[] = true
true

julia> model.save
Observable{Bool} with 1 listeners. Value:
false

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

julia> model.save
Observable{Bool} with 1 listeners. Value:
true
5

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

6

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

screenshot_2021-03-05_15:34:10
screenshot_2021-03-05_15:34:10819×436 33.6 KB

7

And you are right, works on my side.

8

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

9

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

10

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
11

Thank you, will do too.