vue中组件刷新,避免加载缓存?

vue中组件刷新,避免加载缓存?

在element-ui table中插入了html文件,每一次展开都会发送请求,后台都会更新这两个文件,但是页面总是加载上一次请求得到的html文件。给iframe绑定了key,然后每次请求成功后都改变key值,但没什么用

html:

<el-table-column type="expand" v-loading="loading">
            <template>
              <div class="scatter" style="float: left;width: 50%;" id="scatter">
                             <iframe src="static/picScatter.html" frameborder="0" class="pic" style="height: 400px;width: 100%;margin: 0;" id="scatterPic" :key="scatter"></iframe>
              </div>
              <div class="box" style="float: right;width: 50%;" id="box">
                <iframe src="static/picBox.html" frameborder="0" class="pic" style="height: 400px;width: 100%;margin: 0;" id="picBox.html" :key="box"></iframe>
              </div>
            </template>
</el-table-column>

data:

data () {
      return {
        scatter: 0,
        box: 1,

methods:

getRowKeys (row) {
        return row.bodysite
      },
expandSelect (row, expandedRows) {
    var that = this
    console.log(row)
    if (expandedRows.length) {
        that.expands = []
        if (row) {
            that.expands.push(row.bodysite)
        }
    }else{
        that.expands = []
    }
    this.loading = true
    this.$axios
        .get('taxonsDetail', { params: { id: this.speciesInfo.id,site: row.bodysite } })
        .then(res => {
                console.log(res.data)
            if (res.data.results === "success"){
                this.box += 1
                this.scatter += 1
            }
        })
}

充分了解一下浏览器的缓存机制。
get请求只要url没有变化,一定会走缓存。
所以解决办法是将iframe的src动态化

你把src改为:src="xxx"试试看 其实我没有看太懂你的问题

HTML一定会走缓存的

把HTML改成请求接口渲染的HTML就好了
或者
<iframe :src="'static/picBox.html?t='+Date.now()"