layuiform表单的动态渲染与vue.js之间的冲突解决方法（附代码）

内容导读

互联网集市收集整理的这篇技术教程文章主要介绍了layuiform表单的动态渲染与vue.js之间的冲突解决方法（附代码），小编现在分享给大家，供广大互联网技能从业者学习和参考。文章包含1023字，纯文字阅读大概需要2分钟。

内容图文

本篇文章给大家带来的内容是关于layui form表单的动态渲染与vue.js之间的冲突解决方法（附代码），有一定的参考价值，有需要的朋友可以参考一下，希望对你有所帮助。

这次用layui 结合vue.js做项目，发现表单中，如select发送改变，动态渲染select时，发现页面不能渲染数据。
在社区发现有些layui与vue.js表单冲突解决方案，这里提供一个很简单的方法，就是利用vue.js的钩子函数updated
代码如下

methods: {
    getResponse (){
        let _this = this;
        axios.get(window.location.pathname)
            .then(function(res){
                if (res.status == 200){
                    _this.role_list = res.data.role_list;
                    //这里是从服务端请求拿到数据，不用理睬
                }
            })
            .catch(function (error) {
                console.log(error);
            });
    },
},
//下面是重点
updated: function () {
    this.$nextTick(function () {
       layui.use(['form'], function(){
           layui.form.render('select')
       });
    });
}

当然，场景不一样，写法也可不一样，如通过layui.form监听select等，再去渲染也是一种方案

相关推荐：

基于layui实现动态添加下拉选择框的模块

如何利用layim实现历史记录的初始化（附代码）

以上就是layui form表单的动态渲染与vue.js之间的冲突解决方法（附代码）的详细内容，更多请关注Gxl网其它相关文章！

内容总结

以上是互联网集市为您收集整理的layuiform表单的动态渲染与vue.js之间的冲突解决方法（附代码）全部内容，希望文章能够帮你解决layuiform表单的动态渲染与vue.js之间的冲突解决方法（附代码）所遇到的程序开发问题。 如果觉得互联网集市技术教程内容还不错，欢迎将互联网集市网站推荐给程序员好友。

内容备注

版权声明：本文内容由互联网用户自发贡献，该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容， 请发送邮件至 gblab@vip.qq.com 举报，一经查实，本站将立刻删除。

内容手机端

---