vue+layui實(shí)現(xiàn)select動(dòng)態(tài)加載后臺(tái)數(shù)據(jù)的例子
剛開始由于layui form渲染與vue渲染有時(shí)間差 有時(shí)會(huì)導(dǎo)致 select里面是空白的
后來(lái)就想辦法 等vue數(shù)據(jù)渲染完 再渲染layui form
試過(guò)模塊化導(dǎo)入layui form組件 然后等vue數(shù)據(jù)渲染完后手動(dòng)進(jìn)行渲染
這種方式有一個(gè)小問(wèn)題 有時(shí)候會(huì)提示render方法未定義
可能是由于執(zhí)行順序原因 vue先執(zhí)行了
最后把vue代碼放到layui.use里面 問(wèn)題解決
可能不是最好的實(shí)現(xiàn)方式 如有更好的實(shí)現(xiàn)方式歡迎指出 共同進(jìn)步
頁(yè)面代碼
<div id="demo" class="layui-inline layui-form" lay-filter="test2"> <select> <option v-for="option in options" v-bind:value="option.id"> {{ option.name }} </option> </select> </div>
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('請(qǐng)求失?。?+resp.status+','+resp.statusText); }); } }, })
以上這篇vue+layui實(shí)現(xiàn)select動(dòng)態(tài)加載后臺(tái)數(shù)據(jù)的例子就是小編分享給大家的全部?jī)?nèi)容了,希望能給大家一個(gè)參考,也希望大家多多支持腳本之家。
相關(guān)文章
詳解vue中使用express+fetch獲取本地json文件
本篇文章主要介紹了詳解vue中使用express+fetch獲取本地json文件,非常具有實(shí)用價(jià)值,需要的朋友可以參考下2017-10-10Vue使用antd組件a-form-model實(shí)現(xiàn)數(shù)據(jù)連續(xù)添加功能
這篇文章主要介紹了Vue使用antd組件a-form-model實(shí)現(xiàn)數(shù)據(jù)連續(xù)添加功能,本文結(jié)合示例代碼給大家介紹的非常詳細(xì),對(duì)大家的學(xué)習(xí)或工作具有一定的參考借鑒價(jià)值,需要的朋友可以參考下2022-12-12vue中后端做Excel導(dǎo)出功能返回?cái)?shù)據(jù)流前端的處理操作
這篇文章主要介紹了vue中后端做Excel導(dǎo)出功能返回?cái)?shù)據(jù)流前端的處理操作,具有很好的參考價(jià)值,希望對(duì)大家有所幫助。一起跟隨小編過(guò)來(lái)看看吧2020-09-09詳解Vue返回值動(dòng)態(tài)生成表單及提交數(shù)據(jù)的辦法
這篇文章主要為大家介紹了Vue返回值動(dòng)態(tài)生成表單及提交數(shù)據(jù),具有一定的參考價(jià)值,感興趣的小伙伴們可以參考一下,希望能夠給你帶來(lái)幫助2021-12-12vue訪問(wèn)未定義的路由時(shí)重定向404問(wèn)題
這篇文章主要介紹了vue訪問(wèn)未定義的路由時(shí)重定向404問(wèn)題,具有很好的參考價(jià)值,希望對(duì)大家有所幫助。如有錯(cuò)誤或未考慮完全的地方,望不吝賜教2022-10-10