vue+layui實現select動態加載后臺數據的例子

發布時間：2020-09-18 22:51:36

來源：腳本之家

閱讀：85

作者：qq_26814945

剛開始由于layui form渲染與vue渲染有時間差 有時會導致 select里面是空白的

后來就想辦法 等vue數據渲染完 再渲染layui form

試過模塊化導入layui form組件 然后等vue數據渲染完后手動進行渲染

這種方式有一個小問題 有時候會提示render方法未定義

可能是由于執行順序原因 vue先執行了

最后把vue代碼放到layui.use里面 問題解決

可能不是最好的實現方式 如有更好的實現方式歡迎指出 共同進步

頁面代碼

{{ option.name }}

js

var vue = new Vue({

el: '#demo',

data: {

option: {},

options: []

},

created: function () {

this.send();

},

updated: function () {

layui.form.render('select','test2');

console.log(layui.form);

},

methods:{

send() {

axios({

method:'get',

url:'${contextPath}/find?page=1&limit=100'

}).then(resp => {

this.options = resp.data.data;

console.log(resp.data.data);

}).catch(resp => {

console.log('請求失敗：'+resp.status+','+resp.statusText);

});

}

},

})

以上這篇vue+layui實現select動態加載后臺數據的例子就是小編分享給大家的全部內容了，希望能給大家一個參考，也希望大家多多支持億速云。

總結

以上是生活随笔為你收集整理的vue动态跟新layui的select_vue+layui实现select动态加载后台数据的例子的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。