Vue3中@keydown绑定多个函数报错：Cannot read properties of undefined

问题现象 #

在Vue3的input标签中使用@keydown="test(); numOnly();"同时绑定两个函数时，触发错误：TypeError: Cannot read properties of undefined (reading 'key')，移除test()后numOnly函数可正常工作。

相关代码：

numOnly(event) {
  const numPattern = /[\d]/;
  const eventVal = event.key;
  if (!numPattern.test(eventVal)) {
    event.preventDefault();
  } else {
    return true;
  }
},
test() {
  console.log('Test function() called');
}

解决方法 #

方法1：显式传递事件对象 #

修改input的事件绑定，给numOnly函数手动传递$event参数：

<input @keydown="test(); numOnly($event);" />

方法2：合并为单个处理函数 #

定义一个新的处理函数，在内部依次调用test和numOnly，再绑定这个新函数：

handleKeydown(event) {
  this.test();
  this.numOnly(event);
}

<input @keydown="handleKeydown" />

原因说明 #

当Vue事件绑定中直接写多个函数调用（如func1(); func2();）时，Vue不会自动将事件对象传递给需要参数的函数。而单独绑定@keydown="numOnly"时，Vue会自动把事件对象作为参数传入numOnly函数，所以能正常工作。因此需要手动传递$event，或者合并函数统一处理。

内容的提问来源于stack exchange，提问作者Acs