I have the simplest nuxt3 project and my button when pressed doesn't register a click event.

Why? Or where can I look for a solution?

<button @click="console.log('PRESSED')" >GENERATE TEXT</button>

. Replication:

1. npx nuxi init replica_project
2. cd replica_project
3. npm install --save-dev @nuxtjs/tailwindcss
4. Added in nuxt.config.ts modules: [ '@nuxtjs/tailwindcss' ]
5. Put <button @click="console.log('I got hit on')" >HIT ME BABY</button> in the App.vue file `

Tried Solutions:

1. Add .native: <button @click.native="console.log('PRESSED')" >GENERATE TEXT</button>

CodePudding user response：

The usual way of using a console.log is by using a function to call it (rather than doing it directly from the template), like the following.
Using the CompositionAPI:

<script setup>
function consoleHitOn() {
  console.log('I got hit on')
}
</script>

<template>
  <button @click="consoleHitOn">HIT ME BABY</button>
</template>

Using the OptionsAPI, you could achieve the same with a hack by doing this

<script>
export default {
  computed: {
    console: () => console,
  }
}
</script>

<template>
  <button @click="console.log('I got hit on')">HIT ME BABY</button>
</template>

I'm not sure if there is a way of writing the same kind of hack with CompositionAPI, but even if there is I do not really recommend it anyway.

PS: one thing for sure is that it's totally not related to TailwindCSS.
Tailwind is for the style, nothing concerning the event listeners in a Vue app.

CodePudding user response：

I updated my machine, turned it off, tried again today and it worked.

I have no further explanation...