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

這三種語法是有效的，如本演示所示：

演示