Vuetify dialog with iframe

Question

My Vue app contains iframe that is nested inside Vuetify dialog, I'm tying to build a method that will send some data to the iframe via postMessage, then will popout the dialog that will show the iframe with the wanted data (in my case - an image) My problem is that I cant point on the iframe element before the dialog poped out.

This is the dialog with the Iframe:

<v-dialog
  v-model="editBoardDialog"
>
  <v-card>
      <!-- HERE -->
      <iframe id="ifrm" src="/ami.html" width="500" height="500"></iframe>
  </v-card>
</v-dialog>

Those are the methods that sends the image to the iframe via postMessage and pops out the dialog

//opens the dialog
openEditor() {
    this.editBoardDialog = true 
    this.sendImageToIframe() //
},
//passing data to iframe
sendImageToIframe() {
    let iframe = document.getElementById("ifrm").contentWindow; //return NULL... why?
    //sends the image to the iframe
    iframe.postMessage({action:"updateAll",data:this.board.editorDetails})
}

The dialog-content doesn't exist in the DOM at first. It only then gets injected when it's being opened the first time. After that you can continuously query it — discolor

M. Jauernig M. Jauernig · Accepted Answer · 2020-11-18T18:05:57

Try this https://vuetifyjs.com/en/api/v-dialog/#eager

<v-dialog eager v-model="editBoardDialog">
  <v-card>
    <!-- HERE -->
    <iframe id="ifrm" src="/ami.html" width="500" height="500"></iframe>
  </v-card>
</v-dialog>

Vuetify dialog with iframe

1 Answers