0
I have this modal as a son Component:
<template>
<q-modal v-model="opened" :content-css="{width: '40%', minHeight: '300px', padding: '0 15px'}" no-esc-dismiss no-backdrop-dismiss>
<q-modal-layout >
<q-toolbar slot="header" style="box-shadow: none !important; background: none !important; color: rgba(0,0,0,0.8) !important">
<q-toolbar-title class="text-left" text-color="dark" style="margin: 15px 0 5px -25px">
Inserir novo Plano
</q-toolbar-title>
</q-toolbar>
<q-toolbar slot="footer" color="white">
<q-toolbar-title>
<slot name="btnfooter"/>
<q-btn @click="alteraData" label="alterar" color="blue" />
</q-toolbar-title>
</q-toolbar>
<div class="">
</div>
</q-modal-layout>
</q-modal>
</template>
<script>
export default {
name: 'AlteraVencimento',
props: ['abrirModal', 'novaData'],
data() {
return {
opened: false,
}
},
watch: {
abrirModal: function(newVal, oldVal){
this.opened = newVal;
}
},
methods: {
alteraData() {
this.opened = false;
}
}
}
</script>
When what’s inside the function alteraData
end, the modal needs to be closed, but as in the example above, the moment I Seto this.opened = false
modal no longer opens, I need to refresh the page to get it working again, but this happens only when the function alteraData
is executed.
In the father Component I call the modal so:
<modal-vencimento :abrirModal="openedVencimento">
<q-btn color="light" class="float-right ml-1" label="Fechar" slot="btnfooter" @click="openedVencimento = false"/>
</modal-vencimento>
Then, when you click the close button, it closes, if you click to open another parent Component button to open, it will open, however, if you click the Change button that makes the function action alteraData
then it won’t open anymore.
How is your console in the browser? It probably always shows the error if you have.
– Rodrigo Bezerra Rodrigues