Cannot open modal with single click followed by no response

  • The first click after loading the page is fine. Then I need to double click to open it. After a few times, clicking the button to open the modal is not working at all until a couple minutes, and then I can double click to open it. Not sure if something is wrong here.

    In parent:

    <router-link class=“link-with-bg” v-on:click.native=“showSignUpModal” to="/"> Sign In</router-link>
    <signup-modal v-bind:display=“signUpModalDisplay”></signup-modal>

    In child:

    <template id=“login-template”>
    <q-modal v-model=“show” :content-css="{padding: ‘20px’}">
    <div class=“q-display-1 q-mb-md”>Modal</div><p>This one gets displayed from .</p>
    <q-btn color=“orange” @click=“show = false” label=“Close” />


    import {QModalLayout} from 'quasar'
    export default {
        props: {
            display: {
                type: Boolean,
                required: true
        data: function () {
            return {
                show: null
        computed: {
        methods: {
        watch: {
            display: function(){
       = this.display


  • I also tried QDialog, and found the same issue. Also used QBtn to replace the router-link, still have the same problem.

  • After I moved the Modal into the parent page, the issue is gone. Not sure why I cannot put it into a separate component page.

Log in to reply