vue在IE浏览器下父页面向子页面传输对象时数据丢失

现象:

layer弹窗,父页面向子页面传输对象时数据丢失

父页面

javascript 复制代码
            editItem: function(index) { // 修改
                var data = getTableData();
                var row = data[index];

                dialogOpen({
                    id : 'editItemId',
                    title : '修改',
                    url : '../../contract/contractSubject/contractSubjectEdit.html?_' + $.now(),
                    width: '1024px',
                    height: '768px',
                    scroll : true,
                    success : function(iframeId) {
                        top.frames[iframeId].vm.contractSubject = JSON.parse(JSON.stringify(row));
                    },
                    yes : function(iframeId) {
                        // 子页面传值到父页面
                        var result = top.frames[iframeId].vm.acceptClick();
                        if (result) {
                            var temp = {};
                            Object.assign(temp, result);

                            data[index] = temp;
                            $('#dataGrid').bootstrapTable('load', data);

                            // 关闭窗口
                            dialogCloseById(iframeId);
                        }
                    }
                });
            },

子页面,效果:

解决方案:

往子页面传JSON字符串,$nextTick(子页面vue在 DOM 更新完成后执行回调函数),把JSON字符串转换为对象。

父页面:

javascript 复制代码
            editItem: function(index) { // 修改
                var data = getTableData();
                var row = data[index];

                dialogOpen({
                    id : 'editItemId',
                    title : '修改',
                    url : '../../contract/contractSubject/contractSubjectEdit.html?_' + $.now(),
                    width: '1024px',
                    height: '768px',
                    scroll : true,
                    success : function(iframeId) {
                        top.frames[iframeId].vm.init(JSON.stringify(row));
                    },
                    yes : function(iframeId) {
                        // 子页面传值到父页面
                        var result = top.frames[iframeId].vm.acceptClick();
                        if (result) {
                            var temp = {};
                            Object.assign(temp, result);

                            data[index] = temp;
                            $('#dataGrid').bootstrapTable('load', data);

                            // 关闭窗口
                            dialogCloseById(iframeId);
                        }
                    }
                });
            }

子页面:

javascript 复制代码
                init : function(rowStr) {
					// 初始化数据
					var _this = this;
					_this.$nextTick(function () {
						// vue在 DOM 更新完成后执行回调函数
						_this.contractSubject = JSON.parse(rowStr);
					});
				},
相关推荐
UXbot5 小时前
AI原型设计工具如何支持团队协作与快速迭代
前端·交互·个人开发·ai编程·原型模式
ZC跨境爬虫5 小时前
跟着MDN学HTML_day_48:(Node接口)
前端·javascript·ui·html·音视频
PieroPc7 小时前
CAMWATCH — 局域网摄像头监控系统 Fastapi + html
前端·python·html·fastapi·监控
巴巴博一8 小时前
2026 最新:Trae / Cursor 一键接入 taste-skill 完整教程(让 AI 前端告别“AI 味”)
前端·ai·ai编程
kyriewen8 小时前
半夜三点线上崩了,AI替我背了锅——用AI排错,五分钟定位三年老bug
前端·javascript·ai编程
kyriewen8 小时前
我让 AI 当了 24 小时全年无休的“毒舌考官”
前端·ci/cd·ai编程
hexu_blog8 小时前
vue+java实现图片批量压缩
java·前端·vue.js
IT_陈寒9 小时前
为什么你应该学习JavaScript?
前端·人工智能·后端
lifejump9 小时前
Empire(帝国)CMS 7.5 XSS注入
前端·安全·xss