Vuetify 对话框在重新打开时重置内容

Question

我有一个包含 iframe 的 vuetify 对话框。

我需要每次重新打开对话框时 iframe 都会重置到开头。

现在，每次打开对话框时，iframe 都处于最后状态。

我尝试在对话框上使用 v-if 并添加 :key 进行重新渲染，但没有成功。

我的对话框 + iframe

 <v-dialog
          v-model="dialog['dialog_' + index]"
          width="500">
          <template v-slot:activator="{ on, attrs }">
            <div style="display: flex; flex-direction: column; align-items: center;">
              <v-btn
                v-on="on"
                v-bind="attrs"
                @click="onActionClick(action)"
                icon
                class="action-button">
                <img :src="'../../../static/assets/Images/' + action.icon +'.svg'">
              </v-btn>
              <p
                class="mt-2"
                style="line-height: 12px">{{ action.label }}</p>
            </div>
          </template>
          <iframe
            :src="iframeUrl"
            :title="action.label"/>
        </v-dialog>

谢谢。

Answer 1

在您的 v-dialog 组件中执行以下操作：

<v-dialog
  @input="refreshIframe"
  v-model="dialog['dialog_' + index]"
  width="500">

然后像这样在你的脚本中添加一个方法：

methods: {
  // other methods...
  refreshIframe () {
    const tempUrl = this.iframeUrl;
    iframeUrl = "";
    iframeUrl = tempUrl;
  }
}