使用 iframe 进行 Vuetify 对话框

Question

我的 Vue 应用程序包含嵌套在 Vuetify 对话框中的 iframe，我正在构建一个方法，该方法将通过 postMessage 将一些数据发送到 iframe，然后将弹出对话框，将显示带有所需数据的 iframe（在我的情况下 - 图像） 我的问题是在弹出对话框之前我无法指向 iframe 元素。

这是带有 iframe 的对话框：

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

这些是通过 postMessage 将图像发送到 iframe 并弹出对话框的方法

//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})
}

Answer 1

试试这个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>