QDialog with custom Component dynamically imported



  • 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 🙂



  • @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
          })
    ...
    
    


  • @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
          })
        }
      }
    

Log in to reply