Tengo problemas para entender la lógica detrás de cómo funciona el v-if. Estoy tratando de ocultar botones en la navegación según la página en la que se encuentra el usuario o si está autenticado. Básicamente, quiero que el botón de mi cuenta se muestre cuando el usuario haya iniciado sesión y muestre los botones de registro/inicio de sesión cuando no lo estén. ADEMÁS, si el usuario está en la página "activar mi cuenta", no quiero ningún botón en la navegación Como puede ver, he intentado agregar un método que devuelve la ruta de la página de activación. El problema es que cuando el siguiente código no está comentado, oculta los botones de registro/inicio de sesión, pero también la página de mi cuenta.
<template v-else-if="isNotInConfig"> </template>Esto es lo que tengo hasta ahora:
<div class="navbar-end"> <div class="navbar-item"> <div class="buttons"> <template v-if="$store.state.user.isAuthenticated"> <router-link to="/dashboard/my-account" class="button is-primary is-outlined">My account</router-link> </template> <!-- <template v-else-if="isNotInConfig"> </template> --> <template v-else> <router-link to="/sign-up" class="button is-primary" ><strong>Sign up</strong></router-link> <router-link to="/log-in" class="button is-light">Log in</router-link> </template> </div> </div> </div> <script> export default { data() { return { } }, methods: { isNotInConfig() { return this.$router.history.current["path"] == "/activate/:uid/:token"; } }, }; </script>Puedes hacer algo como:
<template v-if="isNotInConfig()"> <template v-if="$store.state.user.isAuthenticated"> <router-link to="/dashboard/my-account" class="button is-primary is-outlined">My account</router-link> </template> <template v-else> <router-link to="/sign-up" class="button is-primary" ><strong>Sign up</strong></router-link> <router-link to="/log-in" class="button is-light">Log in</router-link> </template> </template>Después
isNotInConfig() { return !this.$route['path'].includes("/activate"); } Al colocar ambos botones dentro de <template v-if="isNotInConfig()"> , solo muestra botones si uno no está en la página "activar mi cuenta".
No olvide usar el operador de igualdad estricta ( === ) en lugar de ( == ) porque agrega conversión de tipo.
Puedes leer más sobre esto aquí .
La lógica de v-if / v-else-if / v-else es exactamente como en cualquier lenguaje de programación. En primer lugar evalúa la sentencia if, si la condición no es verdadera continúa con el else if, y así sucesivamente.
En su caso, siempre mostraría "mi cuenta" si isAuthenticated es verdadero. Si isAuthenticated no es verdadero, entonces evaluará la condición isNotInConfig y finalmente evaluará v-else.
¡Tenga en cuenta que el orden y el anidamiento de las etiquetas html dentro de su plantilla son cruciales! Su comentario entre v-if y v-else , por lo tanto, romperá la secuencia y nunca evaluará su v-else y, por lo tanto, siempre representará el contenido.