Button with custom "tag" property doesn't work anymore when combined with dynamic "disabled" state
Opened this issue · 1 comments
Overview of the problem
Buefy version: 0.1.2
Vuejs version: 3.4.19
OS/Browser: Firefox 122.0.1
Description
If you create a button defined like this:
<b-button
:disabled="isButtonDisabled"
:to="{ name: "my-route-name" }"
tag="router-link"
>Test Button</b-button
... and the variable isButtonDisabled
evaluates to undefined
or null
first and later changes to some other value, the correct tag, in this case router-link
is not applied.
I think it is because of this computed property in this file: https://github.com/ntohq/buefy-next/blob/main/src/components/button/Button.vue#L89
computedTag() {
if (this.$attrs.disabled !== undefined && this.$attrs.disabled !== false) {
return 'button'
}
return this.tag
},
Apparently this.$attrs
is not reactive (maybe?), so the computed property will only be evaluated once, thus the tag will never be changed to this.tag
but stays at button
for all the time.
Steps to reproduce
- Create the button as shown above
- Set the isButtonDisabled variable to
null
- Change it to "not null" for example
Expected behavior
The button should get the correct tag (router-link
, which changes to a
later).
Actual behavior
The button stays at tag button
I have the same problem. The button is always disabled when using the tag
with disabled=false
:
<b-button tag="router-link" :to="{ name: 'home' }" :disabled="false">Home</b-button>