QDialog with custom Component dynamically imported

[BL3]

Hi im running into a problem with QDialog when i try to import the custom component dynamically.

<q-dialog ref="customDialog" @hide="onDialogHide">...</q-dialog>

this code works fine…

import CustomDialog from (./CustomDialog)
...
methods: {
    openDialog () {
      this.$q.dialog({
        component: CustomDialog, 
        parent: this
      })
    }
  }

but on dynamically importing the custom component it fails

methods: {
    openDialog () {
      this.$q.dialog({
        component: () => import('./CustomDialog'),
        parent: this
      })
    }
  }

with the error TypeError: “this.$refs.dialog is undefined”

Any hint is appreciated

[metalsadman]

@BL3 you probably need to wrap the second inside a nextTick or try await for your dialog call. or do local example from vue docs https://vuejs.org/v2/guide/components-dynamic-async.html.

...
components: {
  CustomDialog: () => import('./CustomDialog')
}
...
this.$q.dialog({
        component: CustomDialog,
        parent: this
      })
...

[BL3]

@metalsadman thanks for your hint to use async await, this did the job

methods: {
    async openDialog () {
      const CustomDialog = await import (./CustomDialog)
      this.$q.dialog({
        component: CustomDialog,
        parent: this
      })
    }
  }