南阳理工网站建设,长春市建设工程信息网,wordpress 悬浮公告,上海建筑建材业地址问题描述#xff1a;
后台管理系统#xff0c;这次投产完线上出现了个问题#xff01;element-ui组件下拉选项框打开全部都是无数据#xff0c;而且控制台报错#xff0c;但是新添加的数据是正常显示的。对比了原因之后发现#xff0c;新的数据前端传给后端的格式#…问题描述
后台管理系统这次投产完线上出现了个问题element-ui组件下拉选项框打开全部都是无数据而且控制台报错但是新添加的数据是正常显示的。对比了原因之后发现新的数据前端传给后端的格式[{name:1}, {name:2}]是这样的字符串所以后端再传回来的时候是有对应的key 和 value值的只需将字符串处理成数组即可。
但是老的数据后端返回给我的是这样的1, 2 这样的格式给我那页面肯定显示不出来呀而且也就报错。
本来就是后端的问题但是他说不好改于是只能前端来处理传递的入参格式了下面分享下处理方法
解决方法
1入参格式转化 [{name:1}, {name:2}] 转成 1,2这种形式传给后端 let dialogFormObj {} let arr [] if (this.options this.options.length !0) { this.options.map(v { // 此处判断下拉选是否有值有再push进数组 if (v.name ! ) { arr.push(v.name) } }) dialogFormObj JSON.parse(JSON.stringify(this.dialogForm)) // 此处判断数组是否是空数组如果是空数组就不传options这个字段因为我的项目中还有其他类型的输入框如果传了空的在JSON解析的时候会报错 if (arr.length ! 0) { dialogFormObj.options arr.join(,) } } addTemplate(dialogFormObj).then(res { }) 2) 接口返回的出参格式转化 1,2 后前端再转成 [{name:1}, {name:2}]类型进行渲染 let obj {id: this.id} getInfo(obj).then(res { let optionsArr [] res.data.forEach(i { if (i.options) { // 字符串分割成数组 i.options i.options.split(,) // 下一次添加前先清空之前的 optionsArr [] // 此处遍历数组为每一个属性添加key值转成数组对象形式。当然这种方式仅针对key相同的如果每一个key都不同要采取另外的办法了 i.options.forEach(v { const obj {} obj.name v optionsArr.push(obj) }) i.options optionsArr } }) })
