Is there any way to load or render components into Qdialog?

Question

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

EDITED 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?

Answer 1

Yes possible to render components into Qdialog.

Example -

<q-dialog
        v-model="customDialogModel"
        stack-buttons
        prevent-close
        @ok="onOk"
        @cancel="onCancel"
      >
        <span slot="title">Alert</span>
        <span slot="message"><buyer-info></buyer-info></span>
      </q-dialog>


methods: {
    onOk(){
      alert("hi")
    },
    onCancel(){
        alert("cancle")
    },
    handler(){
        this.customDialogModel=true
    }
  },

You can use dynamic component loading with computed.

Example -

computed: {
    Title() {
        return () => import('@/components/libs/Title.vue');
    },
    Status() {
        return () => import('@/components/libs/Status.vue');
    }
},

<component v-bind:is="Title"></component>
<component v-bind:is="Status"></component>