I am developing a component that is designed to accept an object as a prop.
In case the object is not provided, I aim to set a default value for it.
<script setup lang="ts">
interface LocaleText {
text: string;
single?: boolean;
count?: number;
params?: any;
}
interface Title {
title?: LocaleText;
}
interface Filter extends Title {
items?: string[];
}
interface Props extends Title {
filters?: Filter[];
}
interface Data {
selectedStatus: string;
}
const props = withDefaults(defineProps<Props>(), {
title: (): LocaleText => ({ text: "ExampleText" }),
filters: () => [] as Filter[],
});
function getText(text?: LocaleText): string | undefined | null {
return text?.text ?? "null";
}
</script>
<template>
<div>
Example:
{{ getText(props.title) }}
</div>
</template>
The current output on the page is "Example:null"
I am struggling to pinpoint the reason behind this issue.