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

sadeq shahmoradi · Accepted Answer · 2023-07-18 09:43:55Z

6

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']
})

edited Jul 18, 2023 at 9:43

sadeq shahmoradi

2,4631 gold badge15 silver badges31 bronze badges

answered Jul 18, 2022 at 10:14

TrippleN

1545 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

Fanoflix · Accepted Answer · 2023-06-19 21:01:37Z

2

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
})

answered Jun 19, 2023 at 21:01

Fanoflix

2,1392 gold badges14 silver badges21 bronze badges

Comments

TymoteuszLao · Accepted Answer · 2022-07-15 10:44:32Z

1

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)

edited Jul 15, 2022 at 10:44

answered Jul 15, 2022 at 10:28

TymoteuszLao

9541 gold badge8 silver badges18 bronze badges

Collectives™ on Stack Overflow

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

3 Answers 3

Comments

Comments

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related