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” />
    </q-modal>
    </template>

    <script>

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

    </script>



  • 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.