Quiero mostrar un dato al usuario solo si existe (entonces si se identifica) pero aparece un error: no se pueden leer las propiedades de indefinido (leyendo 'correo electrónico') No entiendo porque he usado la propiedad v-if para evitar ese error aquí
<template> <div> <Navbar/> <p v-if="this.$auth.$storage.state.user.email"> {{ this.$auth.$storage.state.user.email }} </p> </div> </template>La variable this.$auth.$storage.state.user es nula.
Como el v-if está en el objeto de email o en el user , arroja un error antes de verificar la variable.
Entonces, te sugiero que uses este código:
<template> <div> <p v-if="this.$auth.$storage.state.user">{{ this.$auth.$storage.state.user.email }}</p> </div> </template>En realidad, si considera los casos de prueba, será así this.$auth será válido, pero es posible que no contenga $storage , por lo que podría arrojar un error que dice No se puede leer state de indefinido. Lo mismo puede aplicarse cuando profundiza en la comprobación de atributos. Entonces, para hacer este tipo de verificación en cada etapa, puede seguir el siguiente enfoque
<template> <div> <p v-if="$auth?.$storage?.state?.user">{{ $auth.$storage.state.user.email }}</p> </div> </template> Para que el encadenamiento opcional funcione dentro v-if , instale @babel/plugin-proposal-opcional-chaining y agréguelo a los complementos de configuración de babel como @babel/plugin-proposal-opcional-chaining
Una solución simple que puede funcionar fuera de la caja sería
<template> <div> <Navbar /> <p v-if="isEmailFilled"> {{ $auth.$storage.state.user.email }} </p> </div> </template> <script> export default { computed: { isEmailFilled() { return this.$auth?.$storage?.state?.user?.email }, }, } </script>