Close a modal after completing the action in the quasar framework

Question

Close a modal after completing the action in the quasar framework

Navigation

#1 by (0 votes)

0

I have this modal as a child 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 is inside the alteraData function ends, the modal needs to be closed, but as in the example above, the moment I set this.opened = false the modal does not open anymore, I need to refresh the page to return it function, but this happens only when the alteraData function is executed.

In the parent component I call the modal like this:

<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 button of the parent component to open, it will open, however, if you click on the Change button that does the action of the alteraData it does not open anymore.

vue.js quasar

asked by anonymous 02.11.2018 / 19:13

1 answer

Automatic Scroll Vue.Js Maven goal jaxb2: xjc generating classes for wrappers tags

score 0 · 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 issue events to have control over the component, I would leave the modal in this way and every time the computed property is changed I update the props openModal.