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

**URL:** <https://discourse.julialang.org/t/allow-for-more-quasar-vue-properties-to-be-bound-to-observable-parameters-in-the-model/56554>\
**Category:** Web Stack\
**Tags:** question\
**Created:** [March 5, 2021, 1:47pm UTC](https://discourse.julialang.org/t/allow-for-more-quasar-vue-properties-to-be-bound-to-observable-parameters-in-the-model/56554 "2021-03-05T13:47:57Z")\
**Posts on this page:** 11\
**Page:** 1

<div class="post-metadata">

**Author:** ![yakir12](https://sea2.discourse-cdn.com/julialang/user_avatar/discourse.julialang.org/yakir12/32/297_2.png) [@yakir12](https://discourse.julialang.org/u/yakir12)\
**Post date:** [March 5, 2021, 1:47pm UTC](https://discourse.julialang.org/t/allow-for-more-quasar-vue-properties-to-be-bound-to-observable-parameters-in-the-model/56554/1 "2021-03-05T13:47:57Z")

</div>

Hope you’re doing well @hhaensel 🙂

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:

```julia
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…

---

<div class="post-metadata">

**Author:** ![hhaensel](https://sea2.discourse-cdn.com/julialang/user_avatar/discourse.julialang.org/hhaensel/32/1207_2.png) [@hhaensel](https://discourse.julialang.org/u/hhaensel)\
**Post date:** [March 5, 2021, 2:01pm UTC](https://discourse.julialang.org/t/allow-for-more-quasar-vue-properties-to-be-bound-to-observable-parameters-in-the-model/56554/2 "2021-03-05T14:01:11Z")

</div>

That should do it. Didn’t you try?

---

<div class="post-metadata">

**Author:** ![yakir12](https://sea2.discourse-cdn.com/julialang/user_avatar/discourse.julialang.org/yakir12/32/297_2.png) [@yakir12](https://discourse.julialang.org/u/yakir12)\
**Post date:** [March 5, 2021, 2:01pm UTC](https://discourse.julialang.org/t/allow-for-more-quasar-vue-properties-to-be-bound-to-observable-parameters-in-the-model/56554/3 "2021-03-05T14:01:53Z")

</div>

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

---

<div class="post-metadata">

**Author:** ![yakir12](https://sea2.discourse-cdn.com/julialang/user_avatar/discourse.julialang.org/yakir12/32/297_2.png) [@yakir12](https://discourse.julialang.org/u/yakir12)\
**Post date:** [March 5, 2021, 2:06pm UTC](https://discourse.julialang.org/t/allow-for-more-quasar-vue-properties-to-be-bound-to-observable-parameters-in-the-model/56554/4 "2021-03-05T14:06:44Z")

</div>

Yea, it doesn’t work… MWE:

```julia
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
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
julia> model.save
Observable{Bool} with 1 listeners. Value:
true

```

---

<div class="post-metadata">

**Author:** ![hhaensel](https://sea2.discourse-cdn.com/julialang/user_avatar/discourse.julialang.org/hhaensel/32/1207_2.png) [@hhaensel](https://discourse.julialang.org/u/hhaensel)\
**Post date:** [March 5, 2021, 2:32pm UTC](https://discourse.julialang.org/t/allow-for-more-quasar-vue-properties-to-be-bound-to-observable-parameters-in-the-model/56554/5 "2021-03-05T14:32:45Z")

</div>

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

---

<div class="post-metadata">

**Author:** ![yakir12](https://sea2.discourse-cdn.com/julialang/user_avatar/discourse.julialang.org/yakir12/32/297_2.png) [@yakir12](https://discourse.julialang.org/u/yakir12)\
**Post date:** [March 5, 2021, 2:34pm UTC](https://discourse.julialang.org/t/allow-for-more-quasar-vue-properties-to-be-bound-to-observable-parameters-in-the-model/56554/6 "2021-03-05T14:34:59Z")

</div>

Ah… Just FYI, in the docs [Button | Quasar Framework](https://quasar.dev/vue-components/button#QBtn-API) it says `disable`:

 ![screenshot_2021-03-05_15:34:10](https://global.discourse-cdn.com/julialang/original/3X/8/1/818278877ab2cdfd53e17e8e8d6d41bf6096a477.jpeg)

---

<div class="post-metadata">

**Author:** ![yakir12](https://sea2.discourse-cdn.com/julialang/user_avatar/discourse.julialang.org/yakir12/32/297_2.png) [@yakir12](https://discourse.julialang.org/u/yakir12)\
**Post date:** [March 5, 2021, 2:36pm UTC](https://discourse.julialang.org/t/allow-for-more-quasar-vue-properties-to-be-bound-to-observable-parameters-in-the-model/56554/7 "2021-03-05T14:36:02Z")

</div>

And you are right, works on my side.

---

<div class="post-metadata">

**Author:** ![hhaensel](https://sea2.discourse-cdn.com/julialang/user_avatar/discourse.julialang.org/hhaensel/32/1207_2.png) [@hhaensel](https://discourse.julialang.org/u/hhaensel)\
**Post date:** [March 5, 2021, 2:43pm UTC](https://discourse.julialang.org/t/allow-for-more-quasar-vue-properties-to-be-bound-to-observable-parameters-in-the-model/56554/8 "2021-03-05T14:43:26Z")

</div>

It’s because you use `button` and not `btn`, see also [here](https://github.com/quasarframework/quasar/issues/6162)

---

<div class="post-metadata">

**Author:** ![yakir12](https://sea2.discourse-cdn.com/julialang/user_avatar/discourse.julialang.org/yakir12/32/297_2.png) [@yakir12](https://discourse.julialang.org/u/yakir12)\
**Post date:** [March 5, 2021, 2:45pm UTC](https://discourse.julialang.org/t/allow-for-more-quasar-vue-properties-to-be-bound-to-observable-parameters-in-the-model/56554/9 "2021-03-05T14:45:20Z")

</div>

> [@hhaensel](#):
>
> `button` and not `btn`

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

---

<div class="post-metadata">

**Author:** ![hhaensel](https://sea2.discourse-cdn.com/julialang/user_avatar/discourse.julialang.org/hhaensel/32/1207_2.png) [@hhaensel](https://discourse.julialang.org/u/hhaensel)\
**Post date:** [March 5, 2021, 2:46pm UTC](https://discourse.julialang.org/t/allow-for-more-quasar-vue-properties-to-be-bound-to-observable-parameters-in-the-model/56554/10 "2021-03-05T14:46:57Z")

</div>

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.

---

<div class="post-metadata">

**Author:** ![yakir12](https://sea2.discourse-cdn.com/julialang/user_avatar/discourse.julialang.org/yakir12/32/297_2.png) [@yakir12](https://discourse.julialang.org/u/yakir12)\
**Post date:** [March 5, 2021, 2:47pm UTC](https://discourse.julialang.org/t/allow-for-more-quasar-vue-properties-to-be-bound-to-observable-parameters-in-the-model/56554/11 "2021-03-05T14:47:50Z")

</div>

Thank you, will do too.