How to check if a prop was passed/bound vs not?

[donnysim]

Taking this as an example:

const props = defineProps({
    value: {
        type: String,
    },
});

how can I determine if the value is undefined because it is not bound

<FormData/>

vs it is bound but the value is undefined

<FormData :value="undefined"/>

? This is for a fallback, when a value is not bound we want to use an internal value instead. If we create a symbol for the default value when it is undefined

const props = defineProps({
    value: {
        type: String,
        default: UNDEFINED_SYMBOL,
    },
});

then if the value is bound but undefined, it still falls back to the UNDEFINED_SYMBOL which is not desirable.

[LinusBorg]

This is currently not possible (without reaching into internals).

I'd be very interested in understanding the usecase. I personally haven't found myself in a situation where that difference would have mattered, so I'm curious which problem this would solve for you.

[donnysim]

@LinusBorg Thanks for responding, to try and provide a simplified example, we have an input component that handles the input events on it's own:

<UiInput v-model="object.value">

We want to know if the value is undefined because it is not bound so we can fallback to using an internal value or it is undefined because the object value is not set. The case is a lot more complicated but this is basically the gist of it.

So far we're trying it with useAttrs where we omit value and vModel from props and checking if they were passed as an attribute.

[donnysim]

This deals with dynamic object structure/json objects where if some keys are not present it's because it's old data and at time they were not present, but those fields should still be bound and available now. Preferably we would like to avoid having to merge structures and leave it to the inputs to deal with, so that if they're not touched, the key will not appear in case of a default value emit when undefined.