CODEWITHSUNDEEP
javascriptvue.jsvuejs3
bakis
bakis

Reputation: 675

Vue.js 3 call anonymous function inside event handler

Is it possible to call an anonymous function inside the event handler on Vue.js 3?

I found these options across the internet:

<button @click="return function() { console.log('test')}()">Click me</button>

<button @click="() => { console.log('test') }">Click me</button> //ES6

<button @click="(function(){ console.log('Test'); })();">Click me</button>

None of them seems to be working. Maybe they used to work with Vue.js 2 but I can't confirm that.

Upvotes: 0

Views: 436

Answers (1)

Boussadjra Brahim
Boussadjra Brahim

Reputation: 1

The issue is that console is not defined in the template, so you should define it as property in your data, or call a method that use the console :

<button @click="() => { logDatat('some data log') }">Click me</button> 

<button @click="() => { myConsole.log }">Click me</button> 

....

data(){
  return {
     myConsole : console
   }
}

The three syntaxes are valid as shown in this demo :

DEMO

Upvotes: 1

Related Questions