在vue中使用 layui框架中的form.render()無效解決辦法

下面簡單介紹在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，完美解決。