Vue JS 条件绑定keyup.enter事件无法触发问题如何解决？

问题根因 #

Vue的动态事件名语法@[eventName]不支持在运行时动态解析修饰符：

• 模板内静态书写的@keyup.enter会在编译阶段被Vue处理：自动绑定原生keyup事件，同时内置判断按键是否为Enter的逻辑
• 动态计算返回的keyup.enter字符串不会被Vue识别其中的.enter修饰符，相当于尝试绑定一个名为keyup.enter的自定义事件，原生DOM不存在该事件，因此永远不会触发。

另外你的原始代码还有两个隐性问题：

1. setTimeout的第一个参数直接写props.callback(input.value)会立即执行回调，不会等到延迟结束，需要用箭头函数包裹
2. searchTimeout、debounce两个变量没有声明，运行时会报错

解决方案1（最推荐）：统一绑定keyup事件，回调内做条件判断 #

直接绑定静态的keyup事件，在处理函数内根据skipSearch的值判断是否要过滤非回车按键：

<template>
  <div>
    <input 
      @keyup="manageSearch"
      v-model="input"
      class="form-input"
    />
  </div>
</template>
<script>
import { ref } from 'vue'
export default {
  props: {
    skipSearch: {
      type: Boolean,
      required: false,
      default: false
    },
    callback: {
      type: Function,
      required: false,
      default: () => {}
    },
    debounce: {
      type: Number,
      required: false,
      default: 300
    }
  },
  setup(props) {
    const input = ref('')
    let searchTimeout = null

    function manageSearch(e) {
      // skipSearch为true时仅响应回车事件
      if (props.skipSearch && e.key !== 'Enter') return
      
      clearTimeout(searchTimeout)
      searchTimeout = setTimeout(() => {
        props.callback(input.value)
      }, props.debounce)
    }

    return {
      input,
      manageSearch
    }
  }
}
</script>

解决方案2：双事件绑定，动态控制触发逻辑 #

如果不想在回调内加判断，也可以同时绑定两个事件，通过表达式控制是否执行回调：

<input 
  @keyup.enter="props.skipSearch && manageSearch()"
  @keyup="!props.skipSearch && manageSearch()"
  v-model="input"
  class="form-input"
/>

该方案不需要计算属性，逻辑更直观。

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