Disabled button fires a click event

[rbocharov]

Hi, I’m not sure if it is expected behavior on simply I’m doing something wrong. I place button component like following:

<button class=“primary” :class="{‘disabled’: state.disabled}" @click=“confirm()”>Confirm</button>

When I hover a mouse over the button, it shows up as disabled. However if I click on it, the confirm() event is fired. Is that expected?

[s.molinari]

Yes. In your confirm() method check to make sure the disabled prop isn’t true (or is false).

Scott

[benoitranque]

That or add :disabled="state.disabled" to your button. Currently you only bind the class

[s.molinari]

Hey Ben, @benoitranque

I might be wrong, but isn’t :disable a 0.14 improvement and is actually part of the new q-btn component?

Scott

[rstoenescu]

@rbocharov <button> is not a Vue component in v0.13 (there will be a QBtn in v0.14) but a native DOM element, so disabled as a CSS class does not interferes with the native click event. It’s your responsibility in your event handler to manage the state. Again, in v0.14 by introducing a Vue component (QBtn) this will change.

[rbocharov]

Ok, got it. Thank you for clarification.

[benoitranque]

@s-molinari that is correct. But disabled is a native html property. Its in the vuejs docs. I think

[s.molinari]

Ah yes. Got it. Always learning

https://jsfiddle.net/krrh2hzy/2/

Scott

[QuaSam]

This post is deleted!