Estoy creando una aplicación con Vue 3 y TS 4.4 y se incluye con Vite 2. Tengo un archivo LoginPage.vue con estos contenidos:
<script lang="ts" setup> const props = defineProps<{ message?: string; redirectOnSubmit?: boolean; showRegisterLink?: boolean; }>(); console.log({ ...props }); </script> <template> ... login form and whatnot </template> Este componente se está pasando a vue-router
export const router = createRouter({ history: createWebHistory(), routes: [ { name: RouteName.LOGIN, path: "/login", component: LoginPage }, { name: RouteName.REGISTER, path: "/register", component: RegisterPage }, ], }); El problema que tengo es que cuando se ejecuta el script de setup de la página de inicio de sesión, registra esto:
{ redirectOnSubmit: false, showRegisterLink: false, message: undefined } ¿Por qué mis accesorios booleanos opcionales se ven obligados a ser false en lugar de undefined ? ¿Existe alguna forma de apagar esto? Si cambio de message a message?: boolean , también se cambia a false .
Me gustaría establecer estos accesorios como true por defecto si no se pasa nada, pero tal como está, no hay forma de que yo distinga entre pasar false y omitir los accesorios por completo.
Vue establece por defecto los accesorios booleanos en false si no se especificó ningún default en la declaración de accesorios. El autor de Vueexplica el razonamiento :
La conversión booleana sigue la misma regla de un atributo booleano: la presencia de cualquier valor se convierte en verdadero, la ausencia significa falso.
Para que los accesorios tengan el valor predeterminado true , declare el accesorio con una opción default de true , utilizando la sintaxis basada en objetos para la declaración de accesorios , como se ve en este ejemplo de la API de opciones:
<script> export default { props: { myOptionalBool: { type: Boolean, default: true, 👈 } } } </script>defineProps(props) En <script setup> , defineProps() acepta el objeto de declaración de accesorios (que se muestra arriba) como un argumento de función. Dado que defineProps() solo acepta el argumento de función o el argumento de tipo genérico, todos los accesorios deben declararse en el argumento de función:
<script lang="ts" setup> const props = defineProps({ message: String, showRegisterLink: { type: Boolean, default: true, }, redirectOnSubmit: { type: Boolean, default: true, }, }) </script>withDefaults() y defineProps<T>() La macro withDefaults() se puede usar con defineProps<T>() para especificar valores predeterminados para accesorios específicos:
<script lang="ts" setup> interface Props { message?: string redirectOnSubmit?: boolean showRegisterLink?: boolean } const props = withDefaults(defineProps<Props>(), { redirectOnSubmit: true, showRegisterLink: true, }) </script>