Vue3 Composition API与Typescript默认值的嵌套对象不按预期工作

qnzebej0 于 2023-06-24 发布在 Vue.js

关注(0)|答案(3)|浏览(166)

我希望能够为Vue中的嵌套数据集设置默认值，基本上，如果一个键在被解析到组件的数据集中没有值，我希望该值被自动填充。看这个例子就知道了。然而，我的示例在主对象中嵌套了几个键，似乎不起作用。为什么会这样？我做错了什么

测试组件

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

调用组件

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

Console.log结果

{ rooms: 5 }

Console.log预期结果

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

我正在使用Laravel 9与Vite，Inertia和Vue3，并在vite.config文件中启用了reactivityTransform: true，如下所述
如果我不传递任何数据集对象，我将获得所有默认值

vue.js

来源：https://stackoverflow.com/questions/72992210/vue3-composition-api-with-typescript-default-values-for-nested-objects-not-worki

3条答案

按热度按时间

0sgqnhkj1#

你有没有试过用withDefaults宏来定义默认值的属性

赞(0）回复(0）举报 2023-06-24

oknwwptz2#

我不认为使用 default 可以做到这一点。虽然你可以创建一个默认的对象，然后使用**Object.assign（）**方法创建一个具有默认值的新对象，它将被你将收到的prop覆盖。

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

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

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

console.log(mergedValues)

赞(0）回复(0）举报 2023-06-24

qaxu7uf23#

下面是如何将withDefaults与默认对象一起使用：

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

赞(0）回复(0）举报 2023-06-24

我来回答

Vue3 Composition API与Typescript默认值的嵌套对象不按预期工作

3条答案

相关问题

热门标签

最新问答