目录
公司商城项目,需要做一个首页装修的业务,后端给我每个一个分类设置了一个字段,我需要自己配置传入json,保存之后可以回显
这是接口文档
这是定义的配置
这是原型图
还有个详情接口,就是回显
async getHomeDecorate () {
const { data: { data } } = await getHomeDecorate()
this.shopLogo = {}
this.loginPageImg = []
this.indexSpaceTime = 0
this.indexImg = []
this.imgAdLayout = []
// 现在的写法
// this.shopLogo = [JSON.parse(data.shopLogo) || {}]
// 以前的写法
this.shopLogo = JSON.parse(data.shopLogo) || {}
this.loginPageImg = JSON.parse(data.loginPageImg) || []
this.indexSpaceTime = JSON.parse(data.indexSpaceTime) || 0
this.indexImg = JSON.parse(data.indexImg) || []
this.imgAdLayout = JSON.parse(data.imgAdLayout) || []
},
async saveHomeDecorate () {
const data = {
shopLogo: JSON.stringify(this.shopLogo[0]),
// 登陆页轮播图片
loginPageImg: JSON.stringify(this.loginPageImg),
// 轮播间隔
indexSpaceTime: JSON.stringify(this.indexSpaceTime),
// 轮播图片
indexImg: JSON.stringify(this.indexImg),
// 图片广告组
imgAdLayout: JSON.stringify(this.imgAdLayout)
}
组件渲染方式
对象形式的传递过去第一时间是接收不到的,刷新也没用,但是你到编辑器里重新保存编译后,数据就回显来了,我开始的想法是组件没有像下面循环的组件绑定对应的key,我给他手动绑定也是无效的,一样回显不了子组件接收不到数据,
解决办法
改成对象数组就可以正常回显,当然网上还有其他的解决办法,比如子组件监听父组件传的数据(试过没用,根本就没传数据过来),v-if啥的