Is it possible to load/render components in Qdialog?



  • Is there any way to load or render components into Qdialog? Please I need to know if it is possible and if any example/sample of such methods is available

    A scenario.

    <q-toolbar>
       <q-select v-model="event" :option="eventtype" @input="onEventChange()" label="Select Event" />
    </q-toolbar>
    
    <q-dialog>
    
    </q-dialog>
    

    And in the script,

    <script>
    import eventList from 'statics/data/event.json'
    
    export default {
        data () {
             return {
                 event: null,
                 dialog: false,
                 app: {
                    title: ' '
                    url: ' '
             }
       },
     computed: {
         eventtype () {
             return eventList
        }
    },
    methods: {
      onEventChange () {
        if (this.event === "New Entry" {
           this.app.title = 'New Entry Form'
           this.app.url = 'components/forms/newEntryForm.Vue'
    } else  if (this.event === "Edit Entry" {
          this.app.title = 'Edit User details'
          this.app.url = 'components/forms/editForm.Vue'
    }
    
    }
    </script>
    

    Question
    How can I use Qdialog to load either newEntryForm.vue or editForm.vue depending on event selected by the user?



  • You can use your own/custom component as dialog

    https://quasar.dev/quasar-plugins/dialog#Invoking-custom-component

    Within this custom components, you can import or use whatever other custom components (or Form) you need.

     onEventChange () {
        if (this.event === "New Entry" {
           this.app.title = 'New Entry Form'
           this.app.url = 'components/forms/newEntryForm.Vue'
            this.$q.dialog({
              component: NewEntryForm,
              parent: this,
              app: this.app
            })
    } else  if (this.event === "Edit Entry" {
          this.app.title = 'Edit User details'
          this.app.url = 'components/forms/editForm.Vue'
          this.$q.dialog({
           component: editForm,
           parent: this,
          app: this.app
         })
    }
    


  • @jraez Thank you so much.
    It work.


Log in to reply