快捷導(dǎo)航

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

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

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

剛開(kāi)始由于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)文章

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