No More Posting New Topics!

If you have a question or an issue, please start a thread in our Github Discussions Forum.
This forum is closed for new threads/ topics.

Navigation

    Quasar Framework

    • Login
    • Search
    • Categories
    • Recent
    • Tags
    • Popular
    • Users
    • Groups
    • Search

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

    Framework
    3
    6
    742
    Loading More Posts
    • Oldest to Newest
    • Newest to Oldest
    • Most Votes
    Reply
    • Reply as topic
    Log in to reply
    This topic has been deleted. Only users with topic management privileges can see it.
    • G
      GeroKhai last edited by 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!

      1 Reply Last reply Reply Quote 0
      • s.molinari
        s.molinari last edited by 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

        1 Reply Last reply Reply Quote 1
        • rstoenescu
          rstoenescu Admin last edited by

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

          G 1 Reply Last reply Reply Quote 1
          • s.molinari
            s.molinari last edited by 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

            1 Reply Last reply Reply Quote 0
            • G
              GeroKhai @rstoenescu last edited by

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

              1 Reply Last reply Reply Quote 0
              • G
                GeroKhai last edited by

                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>
                
                1 Reply Last reply Reply Quote 0
                • First post
                  Last post