Vue JS - 条件 keyup.enter 不工作

Question

我正在尝试实现一个有条件的 keyup 事件，但是当我使用计算的属性为 @[listenToKeyup].[=12= 有条件地实现它时，keyup.enter 没有被触发]

<template>
   <div>
      <input @[listenToKeyup]="manageSearch"
             v-model="input"
             class="form-input"/>
   </div>
</template>
export default {
    props: {
      skipSearch: {
        type: Boolean,
        required: false,
        default: false
      },
      callback: {
        required: false
      },
    },
  setup(props, {emit}) {
      const input = ref('');

      const listenToKeyup = computed(() => props.skipSearch ? 'keyup.enter' : 'keyup');

      function manageSearch() {
        clearTimeout(searchTimeout)
        searchTimeout = setTimeout(props.callback(input.value), debounce);
      }

  return {
      input,
      listenToKeyup,
      manageSearch,
  };

  }

在这个例子中，props.skipSearch 在另一个组件中被注册为 true，实际上 'manageSearch' 没有被触发，而在它为 false 的其他组件中，它被触发了。这意味着正在确定 listenToKeyup 中的条件，但是 keyup.enter 没有被触发。如果我尝试在没有条件 '@keyup.enter="manageSearch"' 的情况下添加事件，它会正常工作，所以这也没有问题。

有人可以告诉我我做错了什么吗？

Answer 1

问题是event-modifier。

可以使用动态事件，但不支持修饰符。

您必须将您的逻辑更改为@Boussadjra Brahim 几乎建议的内容，不同之处在于必须手动编写修饰符：

//manage Search
function manageSearch(event) {
  if (!props.skipSearch|| ["Enter"].includes(event.key)) {
    //do your thing
  }
}

Vue JS - 条件 keyup.enter 不工作

Vue JS - Conditional keyup.enter is not working

javascript

events

keyup

vue.js

vue-composition-api

Codesandbox example