vue封装自定义组件，异步加载数据，渲染组件，子组件没接收到

最新推荐文章于 2024-07-05 10:43:06 发布

log远方的远

最新推荐文章于 2024-07-05 10:43:06 发布

阅读量397

点赞数

文章标签： vue.js 前端 javascript

本文链接：https://blog.csdn.net/weixin_47390278/article/details/129777483

版权

在公司商城项目的首页装修业务中，遇到一个问题：后端提供了配置字段，需要将JSON数据保存并能正确回显。通过调整代码，如将数据解析和处理为对象数组，解决了组件无法正常渲染和回显数据的问题。尝试了子组件监听和v-if等方法，最终实现了数据的正确显示。

摘要由CSDN通过智能技术生成

公司商城项目，需要做一个首页装修的业务，后端给我每个一个分类设置了一个字段，我需要自己配置传入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)
     }