layui form表單的動態渲染與vue.js之間的衝突解決方法（附程式碼）

這篇文章帶給大家的內容是關於layui form表單的動態渲染與vue.js之間的衝突解決方法（附程式碼），有一定的參考價值，有需要的朋友可以參考一下，希望對你有所幫助。

這次用layui 結合vue.js做項目，發現表單中，如select發送改變，動態渲染select時，發現頁面不能渲染資料。
在社群發現有些layui與vue.js表單衝突解決方案，這裡提供一個很簡單的方法，就是利用vue.js的鉤子函數updated
程式碼如下

methods: {
    getResponse (){
        let _this = this;
        axios.get(window.location.pathname)
            .then(function(res){
                if (res.status == 200){
                    _this.role_list = res.data.role_list;
                    //这里是从服务端请求拿到数据，不用理睬
                }
            })
            .catch(function (error) {
                console.log(error);
            });
    },
},
//下面是重点
updated: function () {
    this.$nextTick(function () {
       layui.use(['form'], function(){
           layui.form.render('select')
       });
    });
}

當然，場景不一樣，寫法也可不一樣，如透過layui.form監聽select等，再去渲染也是一種方案

#相關推薦：

基於layui實現動態新增下拉選擇框的模組

如何利用layim實作歷史記錄的初始化（附程式碼）

#

以上是layui form表單的動態渲染與vue.js之間的衝突解決方法（附程式碼）的詳細內容。更多資訊請關注PHP中文網其他相關文章！