vue+layui实现select动态加载后台数据的例子


Posted in Javascript onSeptember 20, 2019

刚开始由于layui form渲染与vue渲染有时间差 有时会导致 select里面是空白的

后来就想办法 等vue数据渲染完 再渲染layui form

试过模块化导入layui form组件 然后等vue数据渲染完后手动进行渲染

这种方式有一个小问题 有时候会提示render方法未定义

可能是由于执行顺序原因 vue先执行了

最后把vue代码放到layui.use里面 问题解决

可能不是最好的实现方式 如有更好的实现方式欢迎指出 共同进步

页面代码

<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实现select动态加载后台数据的例子就是小编分享给大家的全部内容了,希望能给大家一个参考,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
javascript实现促销倒计时+fixed固定在底部
Sep 18 Javascript
jQuery实现等比例缩放大图片让大图片自适应页面布局
Oct 16 Javascript
js实现遮罩层弹出框的方法
Jan 15 Javascript
老生常谈JQuery data方法的使用
Sep 09 Javascript
微信小程序 icon组件详细及实例代码
Oct 25 Javascript
javascript 正则表达式去空行方法
Jan 24 Javascript
JS简单获取当前年月日星期的方法示例
Feb 07 Javascript
jQuery简单实现向列表动态添加新元素的方法示例
Dec 25 jQuery
Vuex入门到上手教程
Jun 20 Javascript
微信小程序实现判断是分享到群还是个人功能示例
May 03 Javascript
微信小程序以7天为周期连续签到7天功能效果的示例代码
Aug 20 Javascript
element el-table表格的二次封装实现(附表格高度自适应)
Jan 19 Javascript
layui 中select下拉change事件失效的解决方法
Sep 20 #Javascript
微信小程序实现打开并下载服务器上面的pdf文件到手机
Sep 20 #Javascript
在layui框架中select下拉框监听更改事件的例子
Sep 20 #Javascript
关于layui 下拉列表的change事件详解
Sep 20 #Javascript
刷新页面后让控制台的js代码继续执行
Sep 20 #Javascript
layui动态绑定事件的方法
Sep 20 #Javascript
利用JS代码自动删除稿件的普通弹幕功能
Sep 20 #Javascript
You might like
ajax返回值中有回车换行、空格的解决方法分享
2013/10/24 PHP
PHP验证信用卡卡号是否正确函数
2015/05/27 PHP
PHP strip_tags保留多个HTML标签的方法
2016/05/22 PHP
php 静态属性和静态方法区别详解
2017/04/09 PHP
初学prototype,发个JS接受URL参数的代码
2006/09/25 Javascript
JavaScript中“+=”的应用
2007/02/02 Javascript
精心挑选的15个jQuery下拉菜单制作教程
2012/06/15 Javascript
JavaScript中OnLoad几种使用方法
2012/12/15 Javascript
jquery实现弹出层遮罩效果的简单实例
2014/03/03 Javascript
关于JavaScript命名空间的一些心得
2014/06/07 Javascript
jqGrid中文文档之选项设置
2015/12/02 Javascript
Angular2内置指令NgFor和NgIf详解
2016/08/03 Javascript
EasyUI的doCellTip实现鼠标放到单元格上提示单元格内容
2016/08/24 Javascript
聊一聊Vue.js过渡效果
2016/09/07 Javascript
JS实现类似百叶窗下拉菜单效果
2016/12/30 Javascript
jQuery鼠标悬停内容动画切换效果
2017/04/27 jQuery
利用require.js与angular搭建spa应用的方法实例
2017/07/19 Javascript
webpack热模块替换(HMR)/热更新的方法
2018/04/05 Javascript
Typescript的三种运行方式(小结)
2019/09/18 Javascript
基于layui的table插件进行复选框联动功能的实现方法
2019/09/19 Javascript
JavaScript 中的无穷数(Infinity)详解
2020/02/13 Javascript
vue项目接口管理,所有接口都在apis文件夹中统一管理操作
2020/08/13 Javascript
从零开始用webpack构建一个vue3.0项目工程的实现
2020/09/24 Javascript
[45:38]DOTA2上海特级锦标赛主赛事日 - 1 胜者组第一轮#1Liquid VS Alliance第一局
2016/03/02 DOTA
[11:42]2018DOTA2国际邀请赛寻真——OG卷土重来
2018/08/17 DOTA
Python配置文件解析模块ConfigParser使用实例
2015/04/13 Python
python绘制铅球的运行轨迹代码分享
2017/11/14 Python
Python操作SQLite/MySQL/LMDB数据库的方法
2019/11/07 Python
mac 上配置Pycharm连接远程服务器并实现使用远程服务器Python解释器的方法
2020/03/19 Python
VScode连接远程服务器上的jupyter notebook的实现
2020/04/23 Python
Charlotte Tilbury英国官网:英国彩妆品牌
2017/05/26 全球购物
德国二手设计师时装和复古时装跳蚤市场:Mädchenflohmarkt
2020/11/09 全球购物
结婚典礼证婚词
2014/01/08 职场文书
晚宴邀请函范文
2014/01/15 职场文书
2015年汽车销售经理工作总结
2015/04/27 职场文书
在JavaScript中如何使用宏详解
2021/05/06 Javascript