• vue keepalive 组件切换echarts不显示


    问题描述:

    最近开发 H5+ APP ,首页是两个echarts的折线图,由于项目应用了 keep-alive ,导致这个组件在显示的时候,有时候并不会走 mounted 函数,而且在切换到其他页面,再切换回来的时候,这个折线图是不显示的

    解决方案:

     

     第一个问题是有时候进入页面并不会调用 mounted 函数,解决方案是把数据加载放到 activated 函数中

    因为 keep-alive 会缓存页面,所以页面在重新进入时,不会重新加载,所以不会执行 mounted 函数,但是只要是这个页面被激活,就一定会执行 activated 方法,所以在 activated 方法中判断数据是否已经存在,如果不存在就调用后台接口加载数据

    第二个问题是页面切换回来时,echarts有数据也不显示,那么让 echarts 组件在离开时删除,页面激活时再重新渲染 echarts 组件即可

    这里只需要应用 v-if 这个属性的特性,当值为true时渲染组件,值为false时删除组件,而这个删除组件的时机就是页面离开时,也就是 deactivated ,重新渲染的时机就是页面激活时,也就是 activated 

  • 相关阅读:
    反转链表 --剑指offer
    链表的倒数第K个节点
    打印1到最大的n位数----java实现
    Permutations java实现
    Generate Parentheses java实现
    Binary Tree Level Order Traversal java实现
    hadoop中日志聚集问题
    PIG的配置
    hadoop2.20.0集群安装教程
    Map/Reduce之间的Partitioner接口
  • 原文地址:https://www.cnblogs.com/LcxSummer/p/15687069.html
Copyright © 2020-2023  润新知