Estoy buscando hacer un componente global Bootstrap Vue Modal que pueda usar para todas mis necesidades modales.
El problema al que me enfrento es que sigue dándome un error con respecto a la mutación de accesorios. No puede actualizarlos directamente en el componente secundario. Lo cual tiene sentido.
Esto es lo que tengo hasta ahora:
<template> <b-modal v-model="show" size="lg" scrollable centered header-class="event-close-modal-header" @hide="$emit('close')" @cancel="$emit('close')" @ok="$emit('close')" @show="handleShow" > <template #modal-title="{}"> <span class="event-close-modal-header-mc2">{{ title }}</span> </template> <b-container fluid class="pb-4"> <h1>Content goes here</h1> <slot /> </b-container> </b-modal> </template> <script> export default { props: { show: { type: Boolean, default: false, required: true, }, title: { type: String, required: true, }, }, data() { return {}; }, }; </script>
Y en mi padre tengo algo como esto:
<ModalHelper :show.sync="modalOne" // modalOne is a data property title="One" @close="modalOne = false" /> <button @click="modalOne = true">Open Modal One</button>
No puedes usar accesorios en v-model. Intente verlo y copie el nuevo valor en la nueva variable en los datos:
data() { return { showModal: false } }, watch: { show(newValue) { this.showModal = newValue; } }
ahora usa showModal en tu código en lugar de "show".
Sin embargo, este no es un buen enfoque. Debe abrir y cerrar los modales de bootstrap vue usando:
$bvModal.show() $bvModal.hide()