I am facing an issue with implementing a conditional keyup event in my code. When I try to conditionally use a computed property for @[listenToKeyup], the keyup.enter event does not get triggered.
<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,
};
}
Upon further investigation, it seems that when props.skipSearch is set to true in another component, the 'manageSearch' function is not fired. However, in components where it is set to false, everything works as expected. It appears that the condition within listenToKeyup is correctly determined, but the keyup.enter event is still not being triggered. Interestingly, if I remove the condition and directly add the event '@keyup.enter="manageSearch"', it functions properly, ruling out any issues with that part of the code.
If anyone could provide insight into what might be going wrong here, I would greatly appreciate it.