Hay dos componentes, principal y modal de actualización en mi aplicación web. Quiero que el componente modal se muestre inmediatamente cuando ingrese a la página principal. Entonces, cuando se monta main.vue, showModal se establece como verdadero. Sin embargo, el modal no aparece cuando la web entra en la página principal. Creo que showModal se vuelve verdadero y pasa al componente modal. Cuando uso vue devtool, muestra que popModal es falso. Realmente me confunde.
¿Debo cambiar el ciclo de vida que establece el valor real o alguna sugerencia?
¡Gracias!
Principal.vue
<template> <modal :isShow="showModal"></modal> ... </template> <script> export default { data () { return { showModal: false } } mounted() { //do something this.showModal = true } } <script>Modal.vue
<template> <modal v-if="popModal" v-model="popModal"> <p>xxxxxx</p> <button @click="fn()">Click</button> </modal> </template> <script> export default { props: ['isShow'], data () { return { popModal: this.isShow//supposed to be true } } methods: { fn() { this.popModal = false } } } <script>El problema es que los datos se inicializan una vez cuando se crea el componente. Cuando los accesorios isShow cambian, en los datos permanece el valor anterior. Necesitas agregar un observador para actualizar los datos
watch: { isShow(newVal, oldVal) { // newVal contains the updated value // oldVal contains the previous value this.popModal = newVal; } }O puede hacer que los datos se inicialicen después de que el valor haya cambiado:
// Main.vue <modal v-if="showModal" :isShow="showModal"></modal> // Modal.vue <modal v-model="popModal">