@click does not fire with q-btn

[justin52]

Hi

I’m new to Quasar and I’m trying to use the @click on a q-btn it doesn’t seem to fire. I’m working with an SPA dev mode. Button show and you can click it but it doesn’t show an alert.

<q-btn-group flat>
<q-btn flat color=“brown” size=“lg” align=“right” label=“WATCHING” @click=“alert(‘hello world’)” />
</q-btn-group>

Thanks

[ouaR]

this example will find for a method called “alert” in your vue component methods.
Try this instead:
<q-btn flat color=“brown” size=“lg” align=“right” label=“WATCHING” @click=“() => alert(‘hello world’)” />
or use a new method.

[s.molinari]

It doesn’t work because Vue looks for the component instance method “alert” and since it isn’t there, throws an error. You should have seen this in your console, once clicking your button.

You can do arbitrary JavaScript as this example shows. But methods need to be an instance method.

https://codepen.io/smolinari/pen/qBEPRPB?editors=1010

(last button)

Btw, @ouaR your suggestion doesn’t work either, as the example also shows. The same error happens.

Makes sense too, as you’d want to do more in your click handler than just show an alert, right?

Scott

[justin52]

Hi, I re-installed the quasar cli and now it works. I can only assume I had some package dependency that was causing the issue. Thanks for the responses.