一颗霸气的小虎牙
2020-08-18 15:27
采纳率: 33.3%
浏览 394

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
            }
        })
}
  • 写回答
  • 关注问题
  • 收藏
  • 邀请回答

3条回答 默认 最新

  • 淘人居士 2020-08-18 15:36
    已采纳

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

    打赏 评论
  • 明明是王明明 2020-08-18 17:35

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

    打赏 评论
  • 浴火_凤凰 2020-08-19 12:06

    HTML一定会走缓存的

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

    打赏 评论

相关推荐 更多相似问题