vue layui select不顯示數據

問題

 

頁面顯示沒有數據

 

 

查看HTML

 

確實拼接到了select下，但是並沒有被layui將vue的數據渲染出來。要是使用靜態數據，layui是可以渲染出來的。

 

 

 

原因

 

引用官方文檔

有些時候，你的有些表單元素可能是動態插入的。這時 form 模塊 的自動化渲染是會對其失效的。雖然我們沒有雙向綁定機制（因爲我們叫經典模塊化框架，偷笑.gif） 但沒有關係，你只需要執行 form.render(type, filter); 方法即可。

https://www.layui.com/doc/modules/form.html#render

 

 

 

 

解決

 

刷新所有類

updated:function(){
    layui.use(['form'], function(){
        form.render();
    })
}

參考 https://www.jianshu.com/p/242ddcdf6ab8

 

 

刷新指定類型

updated: function () {
    layui.form.render('select', 'industryCenter');
},

頁面 select的上層div添加 lay-filter="industryCenter"，這樣才能被render指定刷新

<div class="layui-form-item">
    <label class="layui-form-label">行業中心:</label>
    <div class="layui-input-inline" lay-filter="industryCenter">
        <select id="industryCenter" name="industryCenter">
            <option v-for="industry in industryList" v-bind:value="industry.id" :title="industry.id">{{industry.name}}</option>
        </select>
    </div>
</div>

缺少layui.use(['form'], function(){}) 擴住，在第一次的時候會報下面的錯誤。

所以還是要用下面的方式

updated:function() {
    // 在vue更新數據後，layui
    layui.use(['form'], function(){
        form.render('select','industryCenter');
    })
},

參考 https://blog.csdn.net/qq_26814945/article/details/82019346

 

 

 

刷新指定類型 的 操作方式

參考 https://blog.csdn.net/haibo0668/article/details/83247064