欧美bbbwbbbw肥妇,免费乱码人妻系列日韩,一级黄片

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>

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

相關(guān)文章

最新評論