Close a modal after completing the action in the quasar framework

Question

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.

Answer 1

props: {
  abrirModal: {
    type: Boolean,
    default: false
  }
},
computed: {
  modalControl: {
    get () {
      return this.abrirModal
    },
    set (value) {
      this.$emit('update:abrirModal', value)
    }
  }
},
methods: {
  alteraData() {
    this.modalControl = false;
  }
}

For modal control I always use computed and send events to have control over the component, I would leave modal that way and every time the computed property is changed I update to props open.