Currently, I am in the process of developing an application using Vue 3 and TypeScript 4.4, bundled with Vite 2. Within my project, there exists a file named LoginPage.vue containing the following code:
<script lang="ts" setup>
const props = defineProps<{
message?: string;
redirectOnSubmit?: boolean;
showRegisterLink?: boolean;
}>();
console.log({ ...props });
</script>
<template>
... login form and other elements
</template>
This particular component is then passed to vue-router:
export const router = createRouter({
history: createWebHistory(),
routes: [
{ name: RouteName.LOGIN, path: "/login", component: LoginPage },
{ name: RouteName.REGISTER, path: "/register", component: RegisterPage },
],
});
The issue I am encountering arises when the login page's setup script is executed, as it outputs the following:
{ redirectOnSubmit: false, showRegisterLink: false, message: undefined }
I'm puzzled as to why my optional boolean props are defaulting to false instead of undefined. Is there a way to disable this behavior? Even if I change message to message?: boolean, it still defaults to false.
My intention is to set these props to true by default if no value is provided. However, the current setup does not differentiate between passing false and omitting the props entirely.