Is there a way to tell if an unrequired model was passed to a component? (Nuxt3 TS)
I have a filter component that has a callback prop and a value model:
const props = defineProps<{ elements?: T[]; search?: (text: string | undefined) => Awaitable<T[]>; display?: (data: T | undefined) => string; placeholder?: string; callback?: (value?: T) => any; }>(); const value = defineModel<T | undefined>({ required: false, });
And I have a function for selecting an element from a dropdown menu
function selectElement(e: T) { if (props.callback) { props.callback(e); input.value = undefined; //if (v-model passed) value.value = e //else nothing
} else { value.value = e; if (props.display) { input.value = props.display(e); } } opened.value = false; }
If I'm correct I can't check for value being undefined because when I pass a v-model like this:
const discipline = ref<Disciplines>();
v-model="discipline"
It will initially have a value of undefined. So what am I supposed to do here?
The idea here is that if I have a callback feature inside a filter, it will clear the input after the callback fires if we don't pass the v-model. It's good for displaying lists. When I want to be able to choose only one value through a dropdown menu, I want to display this value inside the filter input component.
I can just write 2 components or add a prop for this obviously, but I don't like this idea