如何在Vue渲染函数中定义事件修饰符？keyup.enter触发异常

你犯的核心错误是：Vue.withModifiers() 只支持添加事件修饰符（比如prevent、stop、self），并不支持enter这类按键修饰符，所以用它来限制回车键完全无效，导致所有按键都会触发keydown事件。

两种正确的实现方式 #

方式一：手动判断按键 #

在事件处理函数里直接检查按下的是不是回车键：

<html>
  <body>
    <div id="app"></div>
    <script src="https://cdn.jsdelivr.net/npm/vue@3/dist/vue.global.prod.js"></script>
    <script>
      const app = Vue.createApp({
        render() {
          return Vue.h("input", { 
            onKeydown: (e) => {
              if (e.key === 'Enter') {
                console.log(e);
              }
            } 
          });
        },
      }).mount("#app");
    </script>
  </body>
</html>

方式二：使用Vue的按键修饰符语法（render函数专属写法） #

在render函数中，按键修饰符可以直接通过事件名的后缀来声明，比如监听回车键的keydown事件，就写onKeydownEnter：

<html>
  <body>
    <div id="app"></div>
    <script src="https://cdn.jsdelivr.net/npm/vue@3/dist/vue.global.prod.js"></script>
    <script>
      const app = Vue.createApp({
        render() {
          return Vue.h("input", { 
            onKeydownEnter: (e) => console.log(e)
          });
        },
      }).mount("#app");
    </script>
  </body>
</html>

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