解决 Layui + Vue 动态渲染数据在 IE下 form.render() 无效 问题

20 篇文章 1 订阅
7 篇文章 0 订阅

前阵时间写了一遍关于 "layui+vue实现select动态加载后台数据" 的文章,用 setTimeout + layui.form.render() 的方式来局部刷新的方式重新渲染页面,代码如下

var new Vue({
   el:"#app",
   data:{
     items:null
   },
   mounted:function () {
      this.details();
      // 这是layui的方法
      form.render();
   },
   methods:{
      details:function(){
        $.ajax获取数据成功后进行表单重新渲染
        form.render();
      } 
   }
});

 上述代码在谷歌火狐等主流浏览器中运行一直也没问题,无意中在360兼容模式下打开,发现select竟无数据,试了半天没有找到解决方法,然后百度啊,谷歌啊,各种搜索引擎,终于解决了问题,看下面,

Vue updated生命周期函数:由于数据更改导致的虚拟 DOM 重新渲染和打补丁,在这之后会调用该钩子。
无论是组件本身的数据变更,还是从父组件接收到的 props 或者从vuex里面拿到的数据有变更,都会触发虚拟 DOM 重新渲染和打补丁,并在之后调用 updated。
然后只需要在vue的updated里面重新再去走一下layui的表单重载就行了。
代码:

updated:function(){
   layui.use(['form'], function(){
      form.render();
   }
}

 就这样OK,完美解决。

  • 1
    点赞
  • 2
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值