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 相关文章推荐
推荐11款jQuery开发的复选框和单选框美化插件
Aug 02 Javascript
js获取视频时长代码
Apr 10 Javascript
js匿名函数的调用示例(形式多种多样)
Aug 20 Javascript
node.js中的path.resolve方法使用说明
Dec 08 Javascript
jQuery实现简单的日期输入格式化控件
Mar 12 Javascript
关于JS 预解释的相关理解
Jun 28 Javascript
jQuery使用deferreds串行多个ajax请求
Aug 22 Javascript
js 将input框中的输入自动转化成半角大写(税号输入框)
Feb 16 Javascript
AngularJS监听路由变化的方法
Mar 07 Javascript
使用Node.js搭建静态资源服务详细教程
Aug 02 Javascript
小程序实现左滑删除效果
Jul 25 Javascript
用js实现放大镜效果
Oct 28 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
一个php作的文本留言本的例子(三)
2006/10/09 PHP
php 常用字符串函数总结
2008/03/15 PHP
用js实现预览待上传的本地图片
2007/03/15 Javascript
简单谈谈JavaScript的同步与异步
2015/12/31 Javascript
深入理解Angular2 模板语法
2016/08/07 Javascript
WebSocket+node.js创建即时通信的Web聊天服务器
2016/08/08 Javascript
基于JavaScript实现鼠标箭头移动图片跟着移动
2016/08/30 Javascript
详谈jQuery中使用attr(), prop(), val()获取value的异同
2017/04/25 jQuery
JS实现为动态创建的元素添加事件操作示例
2018/03/17 Javascript
JavaScript代码实现txt文件的上传预览功能
2018/03/27 Javascript
微信小程序画布圆形进度条显示效果
2020/11/17 Javascript
实用的Vue开发技巧
2019/05/30 Javascript
bootstrap table实现横向合并与纵向合并
2019/07/18 Javascript
vue+element搭建后台小总结 el-dropdown下拉功能
2020/04/10 Javascript
序列化模块json代码实例详解
2020/03/03 Javascript
使用JavaScript获取Django模板指定键值数据
2020/05/27 Javascript
Paypal支付不完全指北
2020/06/04 Javascript
如何在 Vue 中使用 JSX
2021/02/14 Vue.js
Python3中的2to3转换工具使用示例
2015/06/12 Python
Python数据可视化教程之Matplotlib实现各种图表实例
2019/01/13 Python
Python遍历文件夹 处理json文件的方法
2019/01/22 Python
pygame实现五子棋游戏
2019/10/29 Python
Python 创建TCP服务器的方法
2020/07/28 Python
Python爬取12306车次信息代码详解
2020/08/12 Python
ALDI奥乐齐官方海外旗舰店:德国百年超市
2017/12/27 全球购物
Lentiamo丹麦:购买便宜的隐形眼镜
2021/01/13 全球购物
简述Linux文件系统通过i节点把文件的逻辑结构和物理结构转换的工作过程
2016/01/06 面试题
Java程序员常见面试题
2015/07/16 面试题
shell程序如何生命变量?shell变量是弱变量吗?
2014/11/10 面试题
五年级语文教学反思
2014/01/30 职场文书
党建示范点实施方案
2014/03/12 职场文书
小学班主任经验交流材料
2014/12/16 职场文书
毕业欢送会致辞
2015/07/29 职场文书
2016秋季幼儿园开学寄语
2015/12/03 职场文书
青少年法制教育心得体会
2016/01/14 职场文书
创业计划书之农家乐
2019/10/09 职场文书