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);
					});
				},
相关推荐
anOnion1 小时前
构建无障碍组件之Carousel Pattern
前端·html·交互设计
ssshooter1 小时前
Tauri 2 iOS 开发避坑指南:文件保存、Dialog 和 Documents 目录的那些坑
前端·后端·ios
Можно2 小时前
深入理解 ES6 Proxy:与 Object.defineProperty 的全面对比
前端·javascript·vue.js
Birdy_x2 小时前
接口自动化项目实战(1):requests请求封装
开发语言·前端·python
天天向上10243 小时前
vue el-table实现拖拽排序
前端·javascript·vue.js
西西学代码3 小时前
Flutter---回调函数
开发语言·javascript·flutter
卷帘依旧4 小时前
JavaScript 闭包经典问题:为什么输出 10 次 i=10
javascript
柳杉4 小时前
Three.js × Blender:从建模到 Web 3D 的完整工作流深度解析
前端·javascript·数据可视化
reembarkation5 小时前
vue3中使用howler播放音频列表
前端·vue.js·音视频
手握风云-5 小时前
基于 Java 的网页聊天室(三)
服务器·前端·数据库