Tengo un proyecto vue.js. El componente vue puede crear un diálogo. Si el usuario presiona el botón Atrás, quiero cerrar este cuadro de diálogo (si está abierto) en lugar de dejar el componente vue. ¿Cómo puedo conseguir esto?
Intenté esto:
beforeRouteLeave(to, from, next) { let self = this; //dialog is open if(self.isShowingDialog){ //closes the dialog self.isShowingDialog = false; } else { //navigates back to previous component next(); } },Funciona, pero no si abro el componente por primera vez y el historial está vacío. En este caso, el botón Atrás sale de mi aplicación en lugar de cerrar el cuadro de diálogo.
Ahora funciona con el hashtag/ancla como lo sugiere @Kapcash. Si presiono ahora el botón Atrás, el cuadro de diálogo se oculta y mi componente principal no se cierra.
MiComponente.vue:
<StockChooser v-if="showStockChooser" v-model="showStockChooser"> import StockChooser from "./components/StockChooser"; Vue.component('StockChooser', StockChooser) data() { return { showStockChooser: false, } }, methods: { openDialog: { this.showStockChooser = true; this.$router.push('#dialogStockChooser') } }StockChooser.vue:
<v-dialog v-model="show" v-if="show" persistent fullscreen> <v-row> <v-btn color="red" @click="cancel()" style="width:100%">Cancel</v-btn> </v-row> </v-dialog> data() { return { show: false, } }, watch: { "$route.hash": { handler: function(dialog_id) { if(dialog_id === '#dialogStockChooser'){ this.show = true; } else { this.show = false; } }, immediate: true }, }, methods: { cancel(){ this.$router.push(-1) }, }