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

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

发布时间:2020-09-18 22:51:36

来源:脚本之家

阅读:85

作者:qq_26814945

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

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

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

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

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

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

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

页面代码

{{ option.name }}

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

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.mzph.cn/news/310070.shtml

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

Rochambeau POJ - 2912 (枚举和加权并查集+路径压缩)找唯一裁判

题意&#xff1a;有n个人玩石头剪刀布&#xff0c;有且只有一个裁判。除了裁判每个人的出拳形式都是一样的。 a<b表示b打败a&#xff0c;ab表示a和b出拳一样&#xff0c;平手。a>b表示a打败b。 给出m个回合的游戏结果&#xff0c;问能否判断出谁是裁判&#xff1f;如果能…

C标准输出流

标准输入流对象cin&#xff0c;重点掌握的函数: cout.flush()//刷新缓冲区 cout.put()//向缓冲区写字符 cout.write()//二进制流的输出 cout.width()//输出格式控制 cout.fill() cout.set(标记) cout.flush() 代码如下: #include <iostream> using namespace std;void…

Autofac在.NET Core 中的使用

前言Autofac 是一款.NET IoC 容器 . 它管理类之间的依赖关系, 从而使应用在规模及复杂性增长的情况下依然可以轻易地修改 。.NET CORE 中也内置了依赖注入&#xff0c;但是有些情况下需要用到Autofac去进行依赖注入&#xff0c;Autofac支持的所有注入方式以外&#xff0c;还支持…

Aladdin and the Flying Carpet (素数打表+正整数的唯一分解定理,找因数对)

题目大意&#xff1a;给两个数a&#xff0c;b&#xff0c;求满足c*da且c>b且d>b的c,d二元组对数&#xff0c;(c,d)和(d,c)属于同一种情况 题目分析&#xff1a;根据唯一分解定理先将a唯一分解&#xff0c;则a的所有正约数的个数为ans (1 a1) * (1 a2) *...(1 an) 因为…

C++文本文件操作和二进制文件读写

文本文件操作: 代码如下: #include <iostream> #include <fstream> using namespace std;void test01() {const char *fileName "C:\\Users\\Tom\\Desktop\\hhh.txt";//ifstream ism(fileName, ios::in);//只读方式打开文件ifstream ism;ism.open(file…

java类结构工具_java类层次结构图工具

Java主类结构_计算机软件及应用_IT/计算机_专业资料。Java主类结构 谢谢大家! Java主类结构 谢谢大家! 申请认证 文档贡献者 胸兢谙韶硛蠌 中西医 59981 ......知识结构类思维导图模板:java知识结构。{"code":&...所有这些都遵从 Spring 的通用事务和 DAO 异常层…

详解.NET Core 依赖注入生命周期

前言.NET Core 自带依赖注入框架&#xff0c;支持三种不同生命周期的注入模式&#xff1a;Singleton 单例模式Scoped 区域模式Transient 瞬时模式但是常常不知道什么时候使用哪种模式才最合适&#xff0c;接下来我就用代码详细解读一下三种模式代码示例首先新建.NET Core API…

[C++STL]string容器用法介绍

string构造函数 代码如下: #include <iostream> #include <string> using namespace std;void test01() {string s1;cout << "s1 " << s1 << endl;const char *str "hello world";string s2(str);cout << "s2…

LightOJ-1220 Mysterious Bacteria (素数打表+欧几里得算法+唯一分解定理)给出x,求x=a^p,最大的指数

题目大意&#xff1a; x b^p, x只有一个因子的p次幂构成 如果24 2^3*3^1&#xff0c;p应该是gcd(3, 1) 1,即24 24^1 324 3^4*2^2(3^2*2)^2,p应该是gcd(4, 2) 2,即324 18^2 所以p gcd(x1, x2, x3, ... , xn){欧几里得算法求取最大公约数}; *本题有一个坑&#xff0c;就…

致敬平凡的程序员--《SOD框架“企业级”应用数据架构实战》自序

“简单就是美”“平凡即是伟大”上面两句话不知道是哪位名人说的&#xff0c;又或者是广大劳动人民总结的&#xff0c;反正我很小的时候就常常听到这两句话&#xff0c;这两句话也成了我的人生格言&#xff0c;而且事实上我也是一个生活过得比较简单的平凡人物&#xff0c;当然…

[C++STL]vector容器用法介绍

代码如下&#xff1a; #include <iostream> #include <string> #include <vector> using namespace std;void printVector(vector<int >&v) {for (vector<int>::iterator it v.begin(); it ! v.end(); it){cout << *it << &qu…

跟沈剑学习如何带领技术团队作战

【学习笔记】| 作者/Edison Zhou这是恰童鞋骚年的第229篇原创文章小编Edison在阿里云开发者社区上看到了58集团技术VP大佬沈剑关于如何带领技术团队作战的一个直播分享&#xff0c;因此在站地铁的上下班路上学习完了整个录播视频&#xff0c;整理总结下此文作为学习笔记&#x…

拓展欧几里得小结(初级理解)

什么是拓展欧几里得&#xff1f;简单的说&#xff0c;就是求关于x,y的方程 ax by gcd(a,b) 的所有整数解 现在我们令g gcd(a,b)则方程变成了ax by g 假如我们现在知道了关于这个方程的一个特解x0, y0&#xff0c;我们就可以用一种方法求出所有的整数解。 说的比较模糊&am…

用java做一个模拟彩票程序_JAVA模拟----- 彩票机子-----抽奖过程的实例化

/*时间&#xff1a;2012-10-05作者&#xff1a;烟大阳仔程序要求&#xff1a;模拟彩票抽奖机的功能编写一个程序,实现随即输出六个号码程序解释&#xff1a;该段程序没有传递参数*/class Day1005_Caipiao{public static void main(String[] args){System.out.println("估计…

[C++STL]deque容器用法介绍

代码如下&#xff1a; #include <iostream> #include <string> #include <deque> using namespace std;void printDeque(const deque<int>& d) {for (deque<int>::const_iterator it d.begin(); it ! d.end(); it){cout << *it <…

“我工作八年,换了四家小公司,今后的职业生涯该怎么走?”

去年&#xff0c;我曾在GIAC大会上分享过一个有关程序员职场变化和转型的话题。在分享结束之后&#xff0c;有一位小伙伴拦在大门口&#xff0c;问了我一个问题&#xff1a;"王老师&#xff0c;虽然你分享的内容很务实&#xff0c;落地性也很强&#xff0c;但我觉得跟自己…

最长回文 HDU - 3068(求最长回文串的长度【马拉车算法Manacher】)

马拉车算法 Manacher‘s Algorithm 是用来查找一个字符串的最长回文子串的线性方法&#xff0c;由一个叫 Manacher 的人在 1975 年发明的&#xff0c;这个方法的最大贡献是在于将时间复杂度提升到了线性 dp[i] ma > i ? min(dp[2 * mod - i], ma - i) : 1; 可以这么说&…

java中的循环结构_Java中的循环结构进阶

循环结构进阶学习本章用到的单词triangle:三角形circle:圆形diamond:钻石password:密码row:行.排列二重循环结构简单的说:二重循环就是一个循环体内又包含另一个完整的循环结构.while循环结构,do-while循环结构,for循环结构三种循环结是可以相互嵌套的语法://while与while循环嵌…

.NET Core + Kubernetes:Deployment

在上篇文章 .NET Core Kubernetes&#xff1a;Pod 中&#xff0c;主要介绍了 Pod 的相关内容&#xff0c; 基于 Pod 为单位能更加合理进行容器编排&#xff0c;然而 Pod 只是个启动了一个或一组容器的资源类型&#xff0c;在实际应用中&#xff0c;我们也需要 Pod 能实现动态扩…