Estoy trabajando con BootstrapVue (VueJS 2).
Cuando abro mi PWA, quiero ver mi encabezado (siempre debe estar allí) y mi login.vue: los componentes component1 y component2 deben estar ocultos.
Y después de hacer clic en mi botón INICIAR SESIÓN en mi login.vue, quiero ocultar mi login.vue y mostrar mis otros dos componentes.
Pero no sé cómo resolver este problema. ¡Gracias de antemano!
<template> <header/> <login/> <component1/> <component2/> </template> <script> import header from './components/header.vue' import component1 from './components/component1.vue' import component2 from './components/component2.vue' import login from './components/login.vue' export default { name: 'App', components: { header, component1, component2, login, } } </script> <template> <div class="mt-5 col-md-12"> <div class="mt-2">User ID</div> <b-form-input></b-form-input> </div> <b-button class="mt-5 mb-5 btn-block"> Login </b-button> </template>En primer lugar, debe agregar un evento de clic al botón de inicio de sesión para comprender si se hace clic en el usuario. Con el evento podemos emitir valor al elemento padre
<b-button class="mt-5 mb-5 btn-block" @click="$emit('loginButtonClicked')"> Login </b-button>Después de eso, debe modificar el componente principal como se muestra a continuación;
<template> <header/> <login v-if="!hideLogin" @loginButtonClicked="hideLogin=true"/> <component1/> <component2/> </template> <script> import header from './components/header.vue' import component1 from './components/component1.vue' import component2 from './components/component2.vue' import login from './components/login.vue' export default { name: 'App', components: { header, component1, component2, login, }, data () { return { hideLogin: false } } } </script> Aquí escuchamos el evento en el padre y modificamos los datos para mostrar los componentes a través v-if
Si está utilizando vuex, cree un atributo en el estado y cambie su valor en el método llamado por el botón. De lo contrario, puede usar un disparador y emitir un evento cuando hace clic en el botón, escucharlo en su componente principal y cambiar el valor de un atributo de datos. Depende de este valor de datos (o su atributo de estado si tiene vuex), puede usar v-if en su componente para elegir los componentes que desea mostrar.