Estoy tratando de implementar un evento keyup condicional, sin embargo, keyup.enter no se dispara cuando lo implemento condicionalmente usando una propiedad calculada para @[listenToKeyup].
<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, }; }En este ejemplo, props.skipSearch se registra como verdadero en otro componente y, de hecho, 'manageSearch' no se activa, mientras que en otros componentes donde es falso, se activa. Esto significa que se determina la condición en listenToKeyup, sin embargo, keyup.enter no se activa. Si trato de agregar el evento sin la condición '@keyup.enter="manageSearch"', funciona como debería, por lo que tampoco hay problema con eso.
¿Puede alguien mostrarme amablemente lo que estoy haciendo mal, por favor?
El problema es el modificador de eventos .
Los eventos dinámicos son posibles pero los modificadores no son compatibles.
Tendría que cambiar su lógica a lo que @Boussadjra Brahim casi sugería solo con la diferencia de que el modificador debe escribirse manualmente:
//manage Search function manageSearch(event) { if (!props.skipSearch|| ["Enter"].includes(event.key)) { //do your thing } }