vue使用iframe切换src路径时不重新刷新

需求:
有一个下拉框联动着iframe的src,下拉框每切换一下,iframe就重新刷新一下。
问题:
如果只是用v-model去绑定iframe的src,手动修改是无法完成重新请求刷新的。
解决思路:
因为使用docment去操作iframe的很麻烦,还有跨域的问题,所以使用v-if的方式重新渲染页面。
实现步骤

<div class="form_box_item">
          <el-form :model="warehouse" :inline="true" label-width="50px" style="margin-top: -10px;margin-bottom: 10px">
            <el-row :gutter="10">
              <el-col :span="22">
                <el-form-item label="仓号:" prop="warehouse">
                  <el-select v-model="warehouse.cloudId" size="small" @change="handleIframe">
                    <el-option v-for=" (item,index) in warehouseList" :key="index" :label="item.warehouseName"
                               :value="item.cloudId">
                    </el-option>
                  </el-select>
                </el-form-item>
              </el-col>
              <el-col :span="2">
                <el-form-item>
                  <el-button size="mini" @click="retureRoute()" v-show="showReture">返回</el-button>
                </el-form-item>
              </el-col>
         </el-row>
      </el-form>
</div>
<div style="height:700px;margin-top: -50px;margin-bottom: 20px">
   <iframe :src="flowSrc" style="height:100%; width:100%;margin:0;border:0;" v-if="loading" ref="iframeId" id="myFrameId" name="myFrameName"></iframe>
 </div>

方法

data() {
      return {
        warehouseList: [],
        warehouse: {
          cloudId: undefined
        },
        loading: true,
        flowSrc: '',
        showReture: false
      };
    },
methods: {
      /** 切换仓房 */
      handleIframe(e) {
        console.log('切换', e)
        this.warehouse.cloudId = e
        this.loading = false
        this.flowSrc = 'http://10.0.11.9:2080/#/grain-room/condition/current?user=grainszy&pass=bupt%40Htl301&grainRoomId=' + this.warehouse.cloudId;  //直接给flowSrc赋值链接
        setTimeout(()=>{
          this.loading = true
        },1000)
      }
    }

v-if做一个延迟加载就可以啦

GitHub 加速计划 / vu / vue
109
18
下载
vuejs/vue: 是一个用于构建用户界面的 JavaScript 框架,具有简洁的语法和丰富的组件库,可以用于开发单页面应用程序和多页面应用程序。
最近提交(Master分支:4 个月前 )
9e887079 [skip ci] 1 年前
73486cb5 * chore: fix link broken Signed-off-by: snoppy <michaleli@foxmail.com> * Update packages/template-compiler/README.md [skip ci] --------- Signed-off-by: snoppy <michaleli@foxmail.com> Co-authored-by: Eduardo San Martin Morote <posva@users.noreply.github.com> 1 年前
Logo

AtomGit 是由开放原子开源基金会联合 CSDN 等生态伙伴共同推出的新一代开源与人工智能协作平台。平台坚持“开放、中立、公益”的理念,把代码托管、模型共享、数据集托管、智能体开发体验和算力服务整合在一起,为开发者提供从开发、训练到部署的一站式体验。

更多推荐