Conflict resolution between dynamic rendering of layui form and vue.js (with code)

The content of this article is about the conflict resolution method between the dynamic rendering of layui form and vue.js (with code). It has certain reference value. Friends in need can refer to it. I hope It will help you.

This time I used layui combined with vue.js to do a project. I found that in the form, if the select sent changes and dynamically rendered the select, I found that the page could not render data.
In the community, I found some solutions to the conflict between layui and vue.js forms. Here is a very simple method, which is to use the hook function of vue.js updated
The code is as follows

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')
       });
    });
}

Of course, the scenario is not The same, the writing method can also be different, such as monitoring select through layui.form, etc., and then rendering is also a solution

Related recommendations:

Dynamically add a drop-down selection box based on layui Module

How to use layim to initialize historical records (with code)

The above is the detailed content of Conflict resolution between dynamic rendering of layui form and vue.js (with code). For more information, please follow other related articles on the PHP Chinese website!