vue+layui實(shí)現(xiàn)select動態(tài)加載后臺數(shù)據(jù)的例子

更新時間：2019年09月20日 09:37:02 作者：qq_26814945

今天小編就為大家分享一篇vue+layui實(shí)現(xiàn)select動態(tài)加載后臺數(shù)據(jù)的例子，具有很好的參考價值，希望對大家有所幫助。一起跟隨小編過來看看吧

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

后來就想辦法等vue數(shù)據(jù)渲染完再渲染layui form

試過模塊化導(dǎo)入layui form組件然后等vue數(shù)據(jù)渲染完后手動進(jìn)行渲染

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

可能是由于執(zhí)行順序原因 vue先執(zhí)行了

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

可能不是最好的實(shí)現(xiàn)方式如有更好的實(shí)現(xiàn)方式歡迎指出共同進(jìn)步

頁面代碼

<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>

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實(shí)現(xiàn)select動態(tài)加載后臺數(shù)據(jù)的例子就是小編分享給大家的全部內(nèi)容了，希望能給大家一個參考，也希望大家多多支持腳本之家。

您可能感興趣的文章:

相關(guān)文章

如何使用Vue3設(shè)計(jì)實(shí)現(xiàn)一個Model組件淺析
v-model在Vue里面是一個語法糖,數(shù)據(jù)的雙向綁定,本質(zhì)上還是通過自定義標(biāo)簽的attribute傳遞和接受,下面這篇文章主要給大家介紹了關(guān)于如何使用Vue3設(shè)計(jì)實(shí)現(xiàn)一個Model組件的相關(guān)資料,需要的朋友可以參考下
2022-08-08
Vue中keyup.enter和blur事件沖突的問題及解決
這篇文章主要介紹了Vue中keyup.enter和blur事件沖突的問題及解決，具有很好的參考價值，希望對大家有所幫助。如有錯誤或未考慮完全的地方，望不吝賜教
2022-10-10
vue實(shí)現(xiàn)圖片切換效果
這篇文章主要為大家詳細(xì)介紹了vue實(shí)現(xiàn)圖片切換效果，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價值，感興趣的小伙伴們可以參考一下
2021-06-06
Vue嵌套路由的各種用法詳解
在 Vue 中,嵌套路由和 Element Plus 的 Menu 組件是構(gòu)建復(fù)雜單頁面應(yīng)用（SPA）時的常用組合,通過嵌套路由,可以實(shí)現(xiàn)多級頁面結(jié)構(gòu),以下是結(jié)合 Vue 嵌套路由和 Element Plus Menu 的各種用法和場景的詳細(xì)介紹,需要的朋友可以參考下
2025-01-01
Vue實(shí)現(xiàn)雙向綁定的原理以及響應(yīng)式數(shù)據(jù)的方法
這篇文章主要介紹了Vue實(shí)現(xiàn)雙向綁定的原理以及響應(yīng)式數(shù)據(jù)的方法，小編覺得挺不錯的，現(xiàn)在分享給大家，也給大家做個參考。一起跟隨小編過來看看吧
2018-07-07
vue項(xiàng)目實(shí)現(xiàn)搜索內(nèi)容變紅色顯示
這篇文章主要為大家介紹了vue項(xiàng)目實(shí)現(xiàn)搜索內(nèi)容變紅色顯示，有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進(jìn)步，早日升職加薪
2022-12-12
vue中forEach循環(huán)的使用講解
這篇文章主要介紹了vue中forEach循環(huán)的使用，具有很好的參考價值，希望對大家有所幫助。如有錯誤或未考慮完全的地方，望不吝賜教
2022-06-06
vue中通過iframe方式加載本地的vue頁面的解決方法
這篇文章主要給大家介紹了在vue中如何通過iframe方式加載本地的vue頁面的解決方法，文中有詳細(xì)的解決流程,需要的朋友可以參考下
2023-06-06
Vue3解決Mockjs引入后并訪問404(Not Found) 的頁面報(bào)錯問題
mock.js:是一款模擬數(shù)據(jù)生成器,可以生成隨機(jī)數(shù)據(jù),攔截 Ajax 請求,使用mockjs模擬后端接口,可隨機(jī)生成所需數(shù)據(jù),模擬對數(shù)據(jù)的增刪改查,本文給大家介紹了Vue3解決Mockjs引入后并訪問404(Not Found) 的頁面報(bào)錯問題,需要的朋友可以參考下
2025-04-04
vue 2.0路由之路由嵌套示例詳解
這篇文章主要給大家介紹了vue 2.0路由之路由嵌套的相關(guān)資料，文中給出了詳細(xì)的示例代碼供大家參考學(xué)習(xí)，對大家具有一定的參考學(xué)習(xí)價值，需要的朋友們下面來一起看看吧。
2017-05-05