RedditPP Mascot

RedditPP

r/vuejs • … • u/Izbitoe_ebalo

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

— 0