Mapping button disabled attribute to a Vuex getter

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?

      Log In
<p>Logging In: {{ isAuthenticating }}</p>

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

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