Every time I try to bind multiple properties to a component using an object, I encounter some issues. I expect to pass the props according to the ContentOptions interface when using this component on different pages and have them be inherited by the component with v-bind. My goal is to assign all the props to the component in one go, rather than individually. However, despite no errors, warnings, or logs, the passed-in properties are not being applied to the component.
Setup of the Component:
<script setup lang="ts">
export interface ContentOptions {
align?: 'start' | 'center' | 'end';
...more options
}
interface Props {
contentOptions?: ContentOptions;
...other options
}
const props = withDefaults(defineProps<Props>(), {
contentOptions: () => ({
align: 'end',
... other options
}),
});
</script>
<template>
<OtherComponents>
<PassPropsToThisComponent v-bind="props.contentOptions">
<!-- stuff -->
</PassPropsToThisComponent>
</OtherComponents>
</template>
Usage of the Component:
<PassPropsToThisComponent :contentOptions="{ align: 'start', ...more options } />
Take a look at the Vue documentation here
Update
I discovered that passing props overrides the default values. For instance, if I use the following:
<PassPropsToThisComponent :contentOptions="{ align: 'start' } />
only the align prop remains available, removing any other default values previously set.