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

Posted 2023-02-19

【中文标题】Vuetify 对话框在重新打开时重置内容

【英文标题】：Vuetify Dialog Reset Content on re-open

【发布时间】：2021-11-13 03:50:23

【问题描述】：

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

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

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

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

我的对话框 + iframe

 <v-dialog
          v-model="dialog['dialog_' + index]"
          >
          <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>

谢谢。

【参考方案1】：

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

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

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

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