Vue3 Composition API with Typescript Default Values for nested objects not working as expected

Question

I want to be able to set default values for nested datasets in Vue, basically, if a key does not have a value in the dataset that is being parsed to the component, I would like that value to be filled in automatically. This kinda works looking into this example here. However, my sample which is nested with several keys in the main object seems not to work. Why is that? what am I doing wrong?

Test Component

<script setup lang="ts">
import {defineProps, PropType} from 'vue';

export type KitchenType = {
    windows: number;
};

export type DefaultTestType = {
    kitchen?: KitchenType;
    rooms?: number;
};

const props = defineProps({
    dataset: {
        type: Object as PropType<DefaultTestType>,
        default: () => ({
            kitchen: {
                windows: 5,
            },
            rooms: 3,
        })
    },
});

console.log('IAM DATASET: ', props.dataset);
</script>

Calling the Component

<DefaultTest :dataset="{
    rooms: 5,
}" />

Console.log result

{ rooms: 5 }

Console.log expected result

{ kitchen: { windows: 5, }, rooms: 5 }

I'm using Laravel 9 with Vite, Inertia and Vue3 and have enabled the reactivityTransform: true in the vite.config file as told here through here

If I don't pass any dataset object, I am getting all the default values

Drapery

Answer 1

Have you ever tried withDefaults macro to define props with the default value

export interface Props {
  msg?: string
  labels?: string[]
}

const props = withDefaults(defineProps<Props>(), {
  msg: 'hello',
  labels: () => ['one', 'two']
})

Noella

Answer 2

I do not think it is possible to do such a thing with the use of default. Although you can create a default object then with the use of the Object.assign() method create a new object with default values, which will be overwritten by the prop you will receive.

const deafult = { kitchen: { windows: 5, }, rooms: 5 };

const recive = {rooms: 3}; //a prop

const mergedValues = Object.assign(deafult, recive);

console.log(mergedValues)

Allineallis

Answer 3

Here is how to use withDefaults with a default object:

interface CustomStyles {
  padding: string
  margin: string
}
interface Props {
  message: string
  styles: CustomStyles
}

const props = withDefaults(defineProps<Props>(), {
  message: "test",
  customStyles: () => ({ 
    padding: "5px",
    margin: "4px"
  }) // notice the round brackets around the object
})

Pedagogics