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 相关文章推荐
Prototype源码浅析 String部分(四)之补充
Jan 16 Javascript
解析javascript 数组以及json元素的添加删除
Jun 26 Javascript
JavaScript图片放大技术(放大镜)实现代码分享
Nov 14 Javascript
原生javascript实现自动更新的时间日期
Feb 12 Javascript
JavaScript的设计模式经典之代理模式
Feb 24 Javascript
用jQuery获取table中行id和td值的实现代码
May 19 Javascript
DropDownList实现可输入可选择(两种版本可选)
Dec 07 Javascript
Node.js中用D3.js的方法示例
Jan 16 Javascript
layui table数据修改的回显方法
Sep 04 Javascript
layui关闭层级、简单监听的实例
Sep 06 Javascript
js String.prototype.trim字符去前后空格的扩展
Aug 23 Javascript
vue.js页面加载执行created,mounted的先后顺序说明
Nov 07 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 和 HTML
2006/10/09 PHP
Windows和Linux中php代码调试工具Xdebug的安装与配置详解
2014/05/08 PHP
php中让人头疼的浮点数运算分析
2016/10/10 PHP
总结PHP中初始化空数组的最佳方法
2019/02/13 PHP
addRule在firefox下的兼容写法
2006/11/30 Javascript
JavaScript中的Window窗口对象
2008/01/16 Javascript
Tab页界面 用jQuery及Ajax技术实现(php后台)
2011/10/12 Javascript
jquery 利用show和hidden实现级联菜单示例代码
2013/08/09 Javascript
时间戳转换为时间 年月日时间的JS函数
2013/08/19 Javascript
jquery实现相册一下滑动两次的方法
2015/02/09 Javascript
Javascript闭包与函数柯里化浅析
2016/06/22 Javascript
AngularJS改变元素显示状态
2017/04/20 Javascript
使用angular帮你实现拖拽的示例
2017/07/05 Javascript
underscore之Chaining_动力节点Java学院整理
2017/07/10 Javascript
详解js创建对象的几种方法及继承
2019/04/12 Javascript
用VsCode编辑TypeScript的实现方法
2020/05/07 Javascript
js+canvas实现图片格式webp/png/jpeg在线转换
2020/08/22 Javascript
js中复选框的取值及赋值示例详解
2020/10/18 Javascript
vue 项目@change多个参数传值多个事件的操作
2021/01/29 Vue.js
python类继承用法实例分析
2014/10/10 Python
python实现支付宝当面付(扫码支付)功能
2018/05/30 Python
python pandas.DataFrame选取、修改数据最好用.loc,.iloc,.ix实现
2018/06/11 Python
python实现指定文件夹下的指定文件移动到指定位置
2018/09/17 Python
python3利用ctypes传入一个字符串类型的列表方法
2019/02/12 Python
10 行Python 代码实现 AI 目标检测技术【推荐】
2019/06/14 Python
python图形开发GUI库wxpython使用方法详解
2020/02/14 Python
python实现翻译word表格小程序
2020/02/27 Python
Python实现Wordcloud生成词云图的示例
2020/03/30 Python
jupyter notebook oepncv 显示一张图像的实现
2020/04/24 Python
Python3之乱码\xe6\x97\xa0\xe6\xb3\x95处理方式
2020/05/11 Python
python 利用matplotlib在3D空间绘制二次抛物面的案例
2021/02/06 Python
俄罗斯护发和专业化妆品购物网站:Hihair
2019/09/28 全球购物
高级人员简历的自我评价分享
2013/11/03 职场文书
行政部经理助理岗位职责
2014/06/15 职场文书
2014年就业工作总结
2014/11/26 职场文书
部门经理迟到检讨书
2015/02/16 职场文书