Vue.js 3 调用匿名 function 内部事件处理程序

Question

是否可以在 Vue.js 3 上的事件处理程序内调用匿名 function？

我在互联网上找到了这些选项：

<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>

他们似乎都没有工作。 也许他们曾经与 Vue.js 2 一起工作，但我无法确认。

Answer 1

问题是模板中没有定义console ，因此您应该将其定义为数据中的属性，或者调用使用console的方法：

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

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

....

data(){
  return {
     myConsole : console
   }
}

这三种语法是有效的，如本演示所示：

演示