Me gustaría mostrar y ocultar un cuadro de diálogo modal de arranque donde este cuadro de diálogo es un componente vue que puedo personalizar su constante (mensaje, botones) usando accesorios.
Uso v-if='show' para mostrarlo, pero el problema es que no puedo configurar show en false cuando el modal está cerrado al hacer clic en el fondo modal. Como resultado, el cuadro de diálogo se muestra una vez, pero cuando se cierra, no se vuelve a mostrar cuando presiono el botón Eliminar por segunda vez.
Tengo un componente vue.js llamado 'persona' que contiene otro componente 'confirmar-eliminar' de la siguiente manera:
Persona.vue:
<template> <div> <confirm-delete v-if="show" :msg="deleteMsg"></confirm-delete> <!-- person details --> <button @click="confirmDelete"> <span class="glyphicon glyphicon-trash"></span> </button> </div> </template> <script> export default { data () { return { show: false, deleteMsg: '' } }, methods: { confirmDelete () { this.show: true, this.deleteMsg: 'Are you sure you want to delete this person?' } } } </script>ConfirmarEliminar.vue:
<template> <div id="modalDelete" class="modal fade" tabindex="-1" role="dialog"> <div class="modal-dialog" role="document"> <div class="modal-content"> <div class="media-body"> <p>{{msg}}</p> </div> </div> </div> </div> <template> <script> export default { props: ['msg'], mounted: function(){ $('#modalDelete').modal('show') } } </script>Por supuesto, si uso solo un componente al incluir el código del diálogo en persona, esto funciona. Pero mi objetivo es reutilizar este componente de diálogo en otras partes de mi aplicación.
¿Alguna idea de cómo puedo hacer esto?
Agregaría un atributo ref a su etiqueta de componente confirm-delete en su plantilla Person.vue , y luego le daría a ConfirmDelete.vue un método show , que simplemente activa el método de arranque. De esa manera, puede activar el método de arranque desde su método confirmDelete en el padre a través this.$refs.modal.show() . Más información sobre refs.
Persona.vue:
<template> <div> <confirm-delete ref="modal" :msg="deleteMsg"></confirm-delete> <!-- person details --> <button @click="confirmDelete"> <span class="glyphicon glyphicon-trash"></span> </button> </div> </template> <script> export default { data () { return { show: false, deleteMsg: '' } }, methods: { confirmDelete () { this.$refs.modal.show(); this.deleteMsg: 'Are you sure you want to delete this person?' } } } </script>ConfirmarEliminar.vue:
<template> <div id="modalDelete" class="modal fade" tabindex="-1" role="dialog"> <div class="modal-dialog" role="document"> <div class="modal-content"> <div class="media-body"> <p>{{msg}}</p> </div> </div> </div> </div> <template> <script> export default { props: ['msg'], methods: { show: function() { $('#modalDelete').modal('show') }, } } </script>