Quiero evitar que todo mi componente (un modal) se vuelva a renderizar. Cuando el usuario inicia sesión, mi aplicación web muestra un modal que incluye algunos mensajes. Una vez que el usuario hace clic en siguiente, el contenido de este modal cambia. Sin embargo, el modal volverá a mostrar la animación emergente. El modal usa el mismo modal, pero cambia el contenido.
Así es como funciona Vue, sin embargo, si la firstPage cambia, la ventana emergente modal vuelve a aparecer ... ¿Cómo podría volver a representar solo la parte del contenido, no todo el modal?
<template> <div> <b-modal v-model="modalShow"> <p v-if="firstPage">Hello</p> <p v-else>{{content}}</p> </b-modal> </div> </template> <script> export default { data() { return { modalShow: false, } }, computed() { content() { return this.$store.state.content }, firstPage() { return this.$store.state.firstPage } } } </script>Después de leer su pregunta, imagino que tiene un login button ... de lo que puede hacer después: agregue un evento de clic a su button como este:
<b-button @click="login = !login> LOGIN </b-button> //use this if you want to switch your modal each time on click <b-button @click="login = false"> LOGIN </b-button> //use this if you only want to change it one time after click Aquí está cambiando su booleano si primero es true después de hacer clic en su botón, será false .
Entonces tiene que definir su propiedad en su data return de esta manera:
data() { return { login: true, } }y luego puedes comprobarlo en tu plantilla, como lo has hecho antes:
<p v-if="login == true">Login is true</p> <p v-if="login == false">Login is false</p> <!-- OR --> <p v-if="login == true">Login is true</p> <p v-else>Login is false</p> También puede agregar un método a su evento de clic y verificarlo allí si no desea tener un código como login = !login en su plantilla.
¡Por favor, hágamelo saber si esto le ayuda!
Es poco probable que el problema de volver a renderizar esté relacionado con los niños, ¿podría elaborar más el ejemplo? Como puede ver en el ejemplo, el contenido de los niños cambia sin abrir el modal por segunda vez, debe estar relacionado con un cambio no deseado en "modalShow", cómo y dónde está cambiando estos datos.
window.onload = () => { new Vue({ el: '#app', data() { return { modalShow: false, firstPage: true, } }, methods: { toggle() { this.modalShow = !this.modalShow; setTimeout(() => this.firstPage = !this.firstPage, 300); } } }) } <link href="https://unpkg.com/bootstrap-vue@2.21.2/dist/bootstrap-vue.css" rel="stylesheet"/> <link href="https://unpkg.com/bootstrap@4.5.3/dist/css/bootstrap.min.css" rel="stylesheet"/> <script src="https://unpkg.com/vue@2.6.12/dist/vue.min.js"></script> <script src="https://unpkg.com/bootstrap-vue@2.21.2/dist/bootstrap-vue.js"></script> <script src="https://unpkg.com/babel-polyfill/dist/polyfill.min.js"></script> <div id="app"> <div> <b-button @click="toggle">Launch demo modal</b-button> <b-modal v-model="modalShow"> <p class="my-4" v-if="firstPage">1st Component</p> <p class="my-4" v-else>2nd Component</p> </b-modal> </div> </div>