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 相关文章推荐
Webwork 实现文件上传下载代码详解
Feb 02 Javascript
Bootstrap3学习笔记(三)之表格
May 20 Javascript
H5移动端图片压缩上传开发流程
Nov 09 Javascript
webpack配置的最佳实践分享
Apr 21 Javascript
用原生JS实现简单的多选框功能
Jun 12 Javascript
Node.js服务器开启Gzip压缩教程
Aug 11 Javascript
vue封装第三方插件并发布到npm的方法
Sep 25 Javascript
jQuery中的$是什么意思及 $. 和 $().的区别
Apr 20 jQuery
解决vue同一slot在组件中渲染多次的问题
Sep 06 Javascript
详解关于表格合并span-method方法的补充(表格数据由后台动态返回)
May 21 Javascript
JavaScript实现留言板案例
Mar 17 Javascript
vant 时间选择器--开始时间和结束时间实例
Nov 04 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
Laravel关联模型中过滤结果为空的结果集(has和with区别)
2018/10/18 PHP
深入分析Cookie的安全性问题
2015/03/01 Javascript
JS函数定义方式的区别介绍
2016/03/22 Javascript
清除js缓存的多种方法总结
2016/12/09 Javascript
Angular-Ui-Router+ocLazyLoad动态加载脚本示例
2017/03/02 Javascript
Angular 4依赖注入学习教程之简介(一)
2017/06/04 Javascript
解决vue-router中的query动态传参问题
2018/03/20 Javascript
vue 中swiper的使用教程
2018/05/22 Javascript
Bootbox将后台JSON数据填充Form表单的实例代码
2018/09/10 Javascript
vue mounted 调用两次的完美解决办法
2018/10/29 Javascript
JS块级作用域和私有变量实例分析
2019/05/11 Javascript
微信自定义分享链接信息(标题,图片和内容)实现过程详解
2019/09/04 Javascript
vue 中url 链接左边的小图标更改问题
2019/12/30 Javascript
JavaScript中CreateTextFile函数
2020/08/30 Javascript
python使用mailbox打印电子邮件的方法
2015/04/30 Python
python中根据字符串调用函数的实现方法
2016/06/12 Python
运行django项目指定IP和端口的方法
2018/05/14 Python
mac 安装python网络请求包requests方法
2018/06/13 Python
Python面向对象之类和对象属性的增删改查操作示例
2018/12/14 Python
利用Python的turtle库绘制玫瑰教程
2019/11/23 Python
Python操作Elasticsearch处理timeout超时
2020/07/17 Python
Python如何实现大型数组运算(使用NumPy)
2020/07/24 Python
Python中实现一行拆多行和多行并一行的示例代码
2020/09/06 Python
scrapy结合selenium解析动态页面的实现
2020/09/28 Python
html标签之Object和EMBED标签详解
2013/07/04 HTML / CSS
ziaja齐叶雅官方海外旗舰店:来自波兰的天然护肤品牌
2017/01/02 全球购物
澳大利亚首屈一指的鞋类品牌:Tony Bianco
2018/03/13 全球购物
俄罗斯首家面向中国消费者的一站式购物网站:Wruru
2020/05/08 全球购物
生日邀请函范文
2014/01/13 职场文书
广告业务员岗位职责
2014/02/06 职场文书
大学军训自我鉴定大全
2014/09/18 职场文书
初三英语教学计划
2015/01/23 职场文书
详解PHP用mb_string处理windows中文字符
2021/05/26 PHP
解决Pytorch修改预训练模型时遇到key不匹配的情况
2021/06/05 Python
Node-Red实现MySQL数据库连接的方法
2021/08/07 MySQL
MySQL表类型 存储引擎 的选择
2021/11/11 MySQL