En esta entrega de la serie sobre patrones de diseño en Vue, vamos a ver las maneras en las que podemos mostrar u ocultar componentes dinámicamente.

 Mostrar u ocultar componentes cuando se cumplen condiciones determinadas es una parte fundamental de cualquier framework de frontend. Vue nos proporciona una serie de directivas que nos permiten realizar estas acciones mediante el paradigma reactivo. Estas son: v-if, v-else, v-else-if y v-show. Para ver cómo funcionan, vamos a usar el ejemplo de un sencillo botón de iniciar sesión:

<template>
    <div>
        <button @click.prevent="iniciarSesion">
            Iniciar sesión
        </button>
    </div>
</template>

<script>
    export default {
        props: {
            estaIniciadaSesion: Boolean
        },
        methods: {
            iniciarSesion() {
                ...
            }
        }
    }
</script>

El objetivo es que este botón diga "Iniciar sesión" si el usuario no inició sesión "Cerrar sesión" si el usuario tiene una sesión iniciada. El componente recibe un prop booleano "estaIniciadaSesion" que indica el estado de la sesión.

V-IF

v-if es una directiva mediante la que podemos indicar a Vue las condiciones que deben cumplirse para que un tag HTML se inserte en el DOM. Por ejemplo, podríamos hacer que el botón aparezca solo si la sesión no está iniciada:

<template>
    <div v-if="!estaIniciadaSesion">
        <button @click.prevent="iniciarSesion">
            Iniciar sesión
        </button>
    </div>
</template>

<script>
    export default {
        props: {
            estaIniciadaSesion: Boolean
        },
        methods: {
            iniciarSesion() {
                ...
            }
        }
    }
</script>

V-ELSE

La directiva v-else debe usarse inmediatamente después de la directiva v-if, y nos permite especificar un tag alternativo para mostrar en caso de que no se cumpla la condición del v-if. Siguiendo con nuestro ejemplo, podríamos hacer que, si la sesión está iniciada, se muestre el botón de cerrar sesión:

<template>
    <div>
        <button @click.prevent="cerrarSesion" v-if="estaIniciadaSesion">
            Cerrar sesión
        </button>
        <button @click.prevent="iniciarSesion" v-else>
            Iniciar sesión
        </button>
    </div>
</template>

<script>
    export default {
        props: {
            estaIniciadaSesion: Boolean
        },
        methods: {
            iniciarSesion() {
                ...
            },
            cerrarSesion() {
                ...
            }
        }
    }
</script>

V-ELSE-IF

La última de esta serie de directivas análogas al tradicional if...else if...else de cualquier lenguaje de programación es precisamente v-else-if. Como ya se deben imaginar, esta directiva se debe usar justo después de v-if y sirve para evaluar una condición adicional en caso de que no se cumpla la anterior. Los v-else-if pueden encadenarse varias veces. Para nuestro ejemplo, imaginemos que un día particular del año existe una promoción de acceso gratuito con un usuario invitado. Podríamos verificar esa condición para mostrar una tercera versión del botón:

<template>
    <div>
        <button @click.prevent="cerrarSesion" v-if="estaIniciadaSesion">
            Cerrar sesión
        </button>
        <button @click.prevent="iniciarSesion" v-else-if="esDiaDePromocion">
            Iniciar sesión ¡GRATIS!
        </button>
        <button @click.prevent="iniciarSesion" v-else>
            Iniciar sesión
        </button>
    </div>
</template>

<script>
    export default {
        props: {
            estaIniciadaSesion: Boolean,
            esDiaDePromocion: Boolean
        },
        methods: {
            iniciarSesion() {
                ...
            },
            cerrarSesion() {
                ...
            }
        }
    }
</script>

V-SHOW

La última directiva de renderizado condicional nos permite ocultar o mostrar un elemento, pero sin sacarlo del DOM. O sea, a diferencia del v-if, si la condición no se cumple, el componente se inserta en el DOM de todas maneras, pero con el estilado display: none. Hay algunos puntos de comparación interesantes entre el uso de v-show y el de v-if:

• v-show es más rápida para ocultar algo que ya se está mostrando, ya que solo cambia la propiedad display.
• v-if es más rápida para renderizar los componentes ocultos (cuando las condiciones no se cumplen), ya que ni siquiera inserta el componente en el DOM.
• v-else y v-else-if solo funcionan con v-if, no con v-show.
• v-show no funciona cuando se lo coloca en una etiqueta <template>.

Para mostrarlo en nuestro ejemplo, podríamos agregar un mensaje de bienvenida que solo se muestre al iniciar sesión:

<template>
    <div>
        <button @click.prevent="cerrarSesion" v-if="estaIniciadaSesion">
            Cerrar sesión
        </button>
        <button @click.prevent="iniciarSesion" v-else-if="esDiaDePromocion">
            Iniciar sesión ¡GRATIS!
        </button>
        <button @click.prevent="iniciarSesion" v-else>
            Iniciar sesión
        </button>
        <h2 v-show="estaIniciadaSesion">
            ¡Bienvenido, {{ nombreUsuario }}!
        </h2>
    </div>
</template>

<script>
    export default {
        props: {
            estaIniciadaSesion: Boolean,
            esDiaDePromocion: Boolean,
            nombreUsuario: String
        },
        methods: {
            iniciarSesion() {
                ...
            },
            cerrarSesion() {
                ...
            }
        }
    }
</script>

Esperamos que con esta breve guía quede claro el uso de las directivas de renderizado condicional de Vue. En la siguiente edición de esta serie, vamos a analizar los componentes dinámicos y sus beneficios. ¡Hasta la próxima!