vue中数据更新后怎么render重新渲染layui

> 对于一个后端狗，有时候也必须写页面啊~ 我们也会遇到各种问题，最近感觉自己也是个前端差不多的人了，上述遇到的问题怎么解决呢？下面是我的解决思路

1:把layui的初始化放到一个函数里面，如下

```
function init() {
            layui.use(['layer','upload'], function(){
                var layer = layui.layer;
                var upload = layui.upload;
                //执行实例
                var uploadInst = upload.render({
                    elem: '#img1' //绑定元素
                    ,headers:{token:token}
                    ,accept:'images'
                    ,field:'image'
                    ,size:5*1024*1024
                    ,drag:true
                    ,url: "{:url('api/upload/upload_img')}" //上传接口
                    ,done: function(res){
                        //上传完毕回调
                        console.log(res)
                        var html="<img class='suoluetu' src='"+res.data+"'>"
                        app.form.img[0] = res.data;
                        $("#img1").html(html)
                    }
                    ,error: function(){
                        //请求异常回调
                        layer.msg("上传出错了，请稍后再试");
                    }
                });
                var upload1 = upload.render({
                    elem: '#img2' //绑定元素
                    ,headers:{token:token}
                    ,accept:'images'
                    ,field:'image'
                    ,size:5*1024*1024
                    ,drag:true
                    ,url: "{:url('api/upload/upload_img')}" //上传接口
                    ,done: function(res){
                        //上传完毕回调
                        console.log(res)
                        var html="<img class='suoluetu' src='"+res.data+"'>"
                        app.form.img[1] = res.data;
                        $("#img2").html(html)
                    }
                    ,error: function(){
                        //请求异常回调
                        layer.msg("上传出错了，请稍后再试");
                    }
                });
                var upload2 = upload.render({
                    elem: '#img3' //绑定元素
                    ,headers:{token:token}
                    ,accept:'images'
                    ,field:'image'
                    ,size:5*1024*1024
                    ,drag:true
                    ,url: "{:url('api/upload/upload_img')}" //上传接口
                    ,done: function(res){
                        //上传完毕回调
                        console.log(res)
                        var html="<img class='suoluetu' src='"+res.data+"'>"
                        app.form.img[2] = res.data;
                        $("#img3").html(html)
                    }
                    ,error: function(){
                        //请求异常回调
                        layer.msg("上传出错了，请稍后再试");
                    }
                });

});
        }
        init();
```

2：再vue更新数据的时候重新渲染调用
```
updated:function(){
                init()
            }
```

这样就解决了我的问题，其实出现问题大部分是vue的生命周期的问题，吧这个思路了解好了，就能想通大部分问题的解决办法。

下面是页面全部代码，上述看不懂的直接通读代码吧
```
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>文章发布系统</title>
    <meta name="keywords" content="文章发布系统">
    <meta name="description" content="文章发布系统">
    <link rel="stylesheet" href="/static/layui/css/layui.css">
    <link rel="stylesheet" href="/static/css/k.css">
    <script src="/static/js/jquery-1.9.1.min.js"></script>
    <script src="/assets/js/wangEditor.min.js"></script>
    <script src="/assets/js/scrollfix.min.js"></script>
    <script src="/assets/js/vue.js"></script>
    <script src="/static/layui/layui.js"></script>
</head>
<body class="KeditorPage">
<div id="app">
    <div class="Kheader">
        <a href="/" class="Klogoa">
            <img class="Klogo" src="https://www.qudonghao.cn/static/assets/images/logo.png" alt="">
        </a>
        <div class="layui-container">
            <a href="javascript:;" onclick="history.go(-1)">
                <i class="layui-icon layui-icon-left"></i>返回 &nbsp;&nbsp;&nbsp;&nbsp;
            </a>

<div class="Kspan">
                        {{form.title.length}}/30
                    </div>
                </div>
                <p class="clear"></p>

<template v-if="form.cover > 1">
                            <div id="img2" class="layui-col-xs4 KimgBox">
                                <template v-if="form.img[1]">
                                    <img class='suoluetu' :src="form.img[1]">
                                </template>
                                <template v-else>
                                    <i class="layui-icon layui-icon-addition fs25"></i>
                                </template>
                            </div>

</div>
                </div>

<div class="layui-col-md7">
                        <select v-model="form.category_id"  name="category_id" lay-verify="required" class="fb_fl">
                            <option v-for="(v,i) in cate" :value="v.id" >
                                {{v.category_name}}
                            </option>
                        </select>
                    </div>
                    <div class="layui-col-md2">
                        &nbsp;
                    </div>
                </div>

</div>

});
        }
        init();

var app = new Vue({
            el: '#app',
            data: {
                form:{
                    title:"",
                    content:"",
                    type:"",
                    adv:0,
                    img:[],
                    subhead:"",
                    original:0,
                    original_url:"",
                    original_auth:"",
                    fans_present:0,
                    self_recommend:0,
                    cover:3,//1单图，2三图，0无图，3自动图
                    category_id:0,
                },
                cate:[]
            }
            ,methods: {
                submit: function () {
                    console.log(this.form);

if(this.form.title.length <5 || this.form.title.length>30){
                        layer.msg("标题长度不符合规范");
                        return false;
                    }
                    if(this.form.category_id==0){
                        layer.msg("请选择分类");
                        return false;
                    }
                    this.form.type = this.form.category_id
                    layer.load()
                    var url = "{:url('api/article/new_save')}"
                    var _this = this
                    $.ajax({
                        headers: {
                            "token":token//此处放置请求到的用户token
                        },
                        url:url,
                        data:_this.form,
                        type:"post",
                        dataType:"json",
                        success:function (e) {
                            layer.closeAll()
                            if(e.code ==200){
                                layer.mg(e.msg);
                                return false;
                            }else {
                                layer.msg(e.msg);
                                return false;
                            }
                        }
                    })

}
                ,ChangeCover:function (cover) {
                    this.form.cover = cover
                }
                ,GetCateGory:function (id) {
                    var url = "{:url('api/article_category/new_index')}"
                    var _this = this
                    var data={
                        category_id:id
                    }
                    $.ajax({
                        headers: {
                            "token":token//此处放置请求到的用户token
                        },
                        url:url,
                        data:data,
                        type:"post",
                        dataType:"json",
                        success:function (e) {
                            layer.closeAll()
                            if(e.code ==200){
                                _this.cate = e.data.like
                            }else {
                                layer.msg(e.msg);
                                return false;
                            }
                        }
                    })
                }
            },
            mounted:function(){
                //页面挂载需要运行的函数
                var _this = this
                const E = window.wangEditor
                const editor = new E('#toolbar-container', '#text-container') // 传入两个元素
                // 或者 const editor = new E( document.getElementById('div1') )
                // 设置编辑区域高度为 500px
                editor.config.height = 600
                // 配置菜单栏，删减菜单，调整顺序
                editor.config.menus = [
                    'undo',
                    'redo',
                    'quote',
                    'head',
                    'bold',
                    'fontSize',
                    'fontName',
                    'italic',
                    'underline',
                    'strikeThrough',
                    'indent',
                    'lineHeight',
                    'foreColor',
                    'backColor',
                    'link',
                    'list',
                    'justify',

'emoticon',
                    'image',
//            'video',
//            'table',
//            'code',
                    'splitLine',

]
                // 配置 server 接口地址
                editor.config.uploadImgServer = "{:url('api/upload/upload_img')}"

editor.config.uploadImgHeaders = {
                    Accept: 'text/x-json',
                    token: token
                }
                editor.config.uploadFileName = 'image'

editor.config.uploadImgHooks = {
                    // 上传图片之前
                    before: function(xhr) {
                        console.log(xhr)

},
                    // 图片上传并返回了结果，图片插入已成功
                    success: function(xhr) {
                        console.log('success', xhr)
                    },
                    // 图片上传并返回了结果，但图片插入时出错了
                    fail: function(xhr, editor, resData) {
                        console.log('fail', resData)
                    },
                    // 上传图片出错，一般为 http 请求的错误
                    error: function(xhr, editor, resData) {
                        console.log('error', xhr, resData)
                    },
                    // 上传图片超时
                    timeout: function(xhr) {
                        console.log('timeout')
                    },
                    // 图片上传并返回了结果，想要自己把图片插入到编辑器中
                    // 例如服务器端返回的不是 { errno: 0, data: [...] } 这种格式，可使用 customInsert
                    customInsert: function(insertImgFn, result) {
                        // result 即服务端返回的接口
                        console.log('customInsert', result)

// insertImgFn 可把图片插入到编辑器，传入图片 src ，执行函数即可
                        insertImgFn(result.data)
                    }
                }

editor.config.onblur = function (newHtml) {
                    console.log('onblur', newHtml) // 获取最新的 html 内容
                    var data={
                        content:newHtml
                    }
                    if(_this.form.cover == 3){
                        //自动图获取
                        var url= "{:url('api/Article/imgs_content')}"
                        $.ajax({
                            headers: {
                                "token":token//此处放置请求到的用户token
                            },
                            url:url,
                            data:data,
                            type:"post",
                            dataType:"json",
                            success:function (res) {
                                _this.form.img = res.data;
                            }
                        })
                    }

}

editor.config.onchange = function (newHtml) {
                    console.log('change 之后最新的 html', newHtml)
                    _this.form.content = newHtml
                }
                editor.create()

$(".toolbarBackground").scrollFix({zIndex:100001}); //固定高度

_this.GetCateGory(_this.form.category_id);
            }
            ,updated:function(){
                init()
            }
        })
    </script>
</body>

</html>
```

注:原创不易,转载请注明出处( https://micuu.com/new/975.html )，本站所有资源来源于网络收集，如有侵权请联系QQ245557979进行清除。

vue中数据更新后怎么render重新渲染layui

留言反馈