trying to make q-modal popup when page loads [SOLVED]

[GeroKhai]

Hi everyone. I am new to using quasar and I am trying to use quasar in laravel. I am trying to make the modal appear when I load the page but somehow It doesn’t open/show when loading the page.

Here is my modal inside my .vue:

<template>
    <div>
        <q-modal v-model="opened" ref="basicModal">
            <h4>Basic Modal</h4>
                <q-btn color="primary" @click="$refs.basicModal.close()">Close</q-btn>
        </q-modal>
    </div>
</template>

Thanks! Any help is appreciated!

[s.molinari]

What is opened set to in data? Set it to true and the dialog should be open. Also, all you need to do with the button is set opened back to false.

<q-btn color="primary" @click="opened = false">Close</q-btn>

Oh, and you don’t need to put QDialog in its own component for it to work or rather, it won’t work as a custom component unless you also offer the value prop and any other props you need and emit the value prop back up. If that didn’t make sense to you, you need to learn a lot more about how to work with Vue.

I’d recommend this course: https://www.udemy.com/vuejs-2-the-complete-guide

Scott

[rstoenescu]

@GeroKhai v0.17 might have issues with modals being opened from the beginning (at mount point).
For a bulletproof approach on modals, please upgrade to v1 --> they’re now called QDialog.

[s.molinari]

Haha…

The whole time I’m looking at QDialog from v1. Never dawned on me QModal from v0.17 was being used.

Sorry bout that!

Scott

[GeroKhai]

@rstoenescu modals being opened from the beginning is what i’m actually after ahaha

[GeroKhai]

Found out what to do, I just used this and the script and changed the value to true. Thanks for the help guys!

<template>
  <div>
    <q-btn color="primary" @click="open = true" label="Open" />
    <q-modal v-model="open">
      <q-btn color="primary" @click="open = false" label="Close" />
    </q-modal>
  </div>
</template>

<script>
export default {
  data () {
    return {
      open: false
    }
  }
}
</script>