在vue中使用 layui框架中的form.render()无效解决办法

Posted 2021-01-29 smallkilts

下面简单介绍在vue中使用 layui框架中的form.render()无效解决办法。

原文地址：小时刻个人技术博客 > http://small.aiweimeng.top/index.php/archives/layuiForm.html

---

 

近期开发的项目中前端ui框架用的是Layui,数据渲染使用vue去渲染，当我用vue渲染表单控件的数据时，
会出现控件被禁用的情况，例如:select下拉等，于是去看文档，按照文档说的写了，结果然并卵，(￣▽￣)"。
搞了半天都没搞好。然后在百度搜索了vue的相关文档后菜解决了问题。
首先觉一个例子，如下面的一段代码：

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

 

上述代码按理来说应该没什么问题啊，但是vue渲染数据成功后layui的表单控件就是不能用，why？(；′⌒`)。

然后百度啊，谷歌啊，各种搜索引擎，终于解决了问题，O(∩_∩)O。看下面，

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

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

 

就这样OK，完美解决。