首頁 > web前端 > js教程 > layui form表單的動態渲染與vue.js之間的衝突解決方法(附程式碼)

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

不言
發布: 2018-08-25 15:30:56
原創
6611 人瀏覽過

這篇文章帶給大家的內容是關於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中文網其他相關文章!

相關標籤:
來源:php.cn
本網站聲明
本文內容由網友自願投稿,版權歸原作者所有。本站不承擔相應的法律責任。如發現涉嫌抄襲或侵權的內容,請聯絡admin@php.cn
作者最新文章
熱門教學
更多>
最新下載
更多>
網站特效
網站源碼
網站素材
前端模板