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

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做一个延迟加载就可以啦