vue中动态渲染元素使用layui文件上传按钮失效问题

内容导读

互联网集市收集整理的这篇技术教程文章主要介绍了vue中动态渲染元素使用layui文件上传按钮失效问题，小编现在分享给大家，供广大互联网技能从业者学习和参考。文章包含2874字，纯文字阅读大概需要5分钟。

内容图文

vue中按钮动态循环渲染的时候 第一次layui文件上传可以使用 之后按钮失效

解决办法：移除对象 重新加入 使layui重新去绑定它

//shareholderfront 代表按钮本身
$(`#shareholderfront${gudongNum}`).remove()

//uploadBox1 代表按钮的父元素
$(`#uploadBox1${gudongNum}`).html(`<button class="layui-btn"  id="shareholderfront${gudongNum}" >
    <i class="layui-icon">&#xe67c;</i>上传身份证人像面\n
     </button>`)

完整代码：

uploadFile1(gudongNum) {
            var that = this;
            
            layui.use(['upload', 'element'], function () {
                var upload = layui.upload;
                var element = layui.element;

                $(`#shareholderfront${gudongNum}`).remove()
                $(`#uploadBox1${gudongNum}`).html(`<button class="layui-btn"  id="shareholderfront${gudongNum}" >
                   <i class="layui-icon">&#xe67c;</i>上传身份证人像面\n
                    </button>`)

                setTimeout(()=>{
                    //执行实例
                    var uploadInst = upload.render({
                        elem: '#shareholderfront' + gudongNum //绑定元素
                        , url: base_url + 'staff/fileupload' //上传接口
                        , headers: {stafftoken: $.cookie("stafftoken")}
                        , data: {
                            pid: function () {
                                return $("#gudong_front_ID" + gudongNum).attr("pid")
                            },
                            sort: 1,
                        }
                        , progress: function (n, elem) {
                            if(gudongNum ==1){
                                that.speed_1=true;
                            }else{
                                $("#positive" + gudongNum).css("display",'block');
                                $("#neibu_1" + gudongNum).html('<span class="layui-progress-text">'+that.percent_1+'</span>');
                            }
                            //上传进度回调
                            that.percent_1 = n + '%'; //获取进度百分比

                            element.progress("shareholderUploadfile_1"+(gudongNum), that.percent_1); //将进度赋值给lay-filter="uploadfile"的进度条

                        }
                        , done: function (res) {
                            if (res.code === 0) {
                                that.shareholderLoading = true;
                                $("#gudong_front_ID" + gudongNum).attr("src", res.data.uploafile.fileUrl);

                                layui.layer.msg('上传成功');

                                that.gudongList.forEach((item,index) =>{
                                    if(gudongNum == (index + 1)){
                                        item.shareholderpic1 = res.data.uploafile;
                                        item.pid1 = res.data.uploafile.id
                                        item.img1 = res.data.uploafile.fileUrl
                                    }
                                })
                            } else {
                                layui.layer.msg(res.msg);
                            }
                        }
                        , error: function (res) {
                            layui.layer.msg(res.msg);
                        }
                    });
                },500)
            });
        },

html部分：

<div class="layui-upload layui-col-md2 layui-col-lg2">
                            <div class=" layui-col-md12 layui-col-lg12 flex-box margin10 width300" v-loading="shareholderLoading_1">
                                <div class="placeholder shengfen_after">
                                    <img :id="step((index+ 1),'gudong_front_ID')"  :pid="item.pid1" :src="item.img1"  class="shengfen_front layui-upload-img card_front" :id="step((index + 1),'gudong_front_ID')" />
                                </div>
                            </div>

                            <div class="layui-col-md12 layui-col-lg12 speedProgress">
                                <div  :id="step((index+1),'positive')"  v-show="speed_1" class="layui-progress progresssy" lay-showpercent="true" :lay-filter="step((index+1),'shareholderUploadfile_1')">
                                    <div  :id="step((index+1),'neibu_1')" class="layui-progress-bar layui-bg-green" lay-percent="0%"></div>
                                </div>
                            </div>

                            <div class="layui-col-md12 layui-col-lg12 flex-box margin10 width300" :id="step((index + 1),'uploadBox1')">
                                <button class="layui-btn"  :id="step((index + 1),'shareholderfront')"  >
                                    <i class="layui-icon">&#xe67c;</i>上传身份证人像面
                                </button>
                            </div>
                        </div>

内容总结

以上是互联网集市为您收集整理的vue中动态渲染元素使用layui文件上传按钮失效问题全部内容，希望文章能够帮你解决vue中动态渲染元素使用layui文件上传按钮失效问题所遇到的程序开发问题。 如果觉得互联网集市技术教程内容还不错，欢迎将互联网集市网站推荐给程序员好友。

内容备注

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

内容手机端

---