Vue JS - 有條件的 keyup.enter 不起作用

Question

我正在嘗試實現一個有條件的 keyup 事件，但是當我使用 @[listenToKeyup] 的計算屬性有條件地實現它時，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
  }
}

代碼沙盒示例