Mapping button disabled attribute to a Vuex getter

Ionic Framework Ionic Vue
1

I have a button in my template that I want to disable based on a value in my Vuex store. I have mapped an isAuthenticating getter to the component using mapGetters which I know works ok because beneath the button I am displaying its value. However, the button is always disabled even if this value is false. Anyone know what I’m doing wrong?

<ion-button
      disabled="isAuthenticating"
      type="submit"
      expand="full"
>
      Log In
</ion-button>
<p>Logging In: {{ isAuthenticating }}</p>

Below the button I am correctly seeing “false” but the button is disabled.

2

You need to use Vue bindings otherwise the disabled prop value is going to be interpreted as the string “isAuthenticating”, which is a truthy value:

<ion-button :disabled="isAuthenticating"></ion-button>

1 Like