If I don't pass a value, the prop is just undefined
, instead of taking the default value.
For example switchView
and activeView
. I have defined the props like this:
interface Props {
config: {
switchView?: boolean;
activeView?: number;
urls: {
someUrl: string;
};
labels?: {
someLabels: string;
};
};
}
const props = withDefaults(defineProps<Props>(), {
config: () => ({
switchView: true,
activeView: 0,
urls: {
someUrl: '',
},
labels: {
someLabel: '',
},
}),
});
And in the parent component, I'm passing the prop config object like so:
const config = {
urls: {
someUrl: '/example',
},
labels: {
someLabel: 'Example label',
},
};
And in my Vue Dev Tools I only see the passed props, but none of the default values that I've set. What am I doing wrong?
If I pass them in the config object, I get them as a prop. But I expect if I don't pass those optional values, then the defaults will take place.
I found the issue. Vue has a problem with nested props, more specifically, the parent config object is the problem. By removing it it works fine.
interface Props {
switchView?: boolean;
activeView?: number;
urls: {
someUrl: string;
};
labels?: {
someLabel: string;
};
}
const props = withDefaults(defineProps<Props>(), {
switchView: true,
activeView: 0,
urls: () => ({
someUrl: '',
}),
labels: () => ({
someLabel: '',
}),
});