【Vue】父组件中定义props树形结构的对象的属性无法返显的问题

一、问题

1.1、环境
电脑环境：Windows 10；
开发工具：IntelliJ IDEA；
数据库环境：MySQL
前端html框架：Element
前端js框架：Vue.js
JDK环境: Jdk1.8；

1.2、问题
Vue.js中，定义了一个对象Data,Data对象中又定义了一个对象variables，variables是以json的形式存储在数据库的字段中的，返显时，前端拿到这个json，然后解析返回；另外variables中有个属性是一个数组，其数据结构如下：

data:{
	variables:{
		list:[]
	}
}

大致就是这么个结构，问题是，相同的页面，相同的代码，为什么另一个页面保存都是成功的，但是出问题的页面不成功呢？

二、解答

在控制变量单一法之后，我终于意识到，两个页面的代码是一模一样，mounted方法也是一模一样；问题出在保存时，第一个页面是保存了所有的字段，保存的数据结构是这样的：

data:{
	title:'标题'
	variables:{
		list:[0,1,2]
	}
}

但是出问题的页面没有保存所有数据，只保存了部分数据，尤其严重的是，他没有保存list:的值，连占位都没有：

data:{
	title:'标题'
	variables:{
	}
}

所以，当两个页面返显时，第1个正常的页面，因为json里有list这个字段，所以不会报未定义list等错，但是因为第2个出问题的页面，没有给list用数组（你也可以定义自己的数组类型）占位，因为是json格式的一个属性，导致第2个页面返显时，根本就没有list属性，及时我在mounted方法里初始化了也data也一样；所以，我们无论list里是否有值填充，我们都要去占位，这个就跟车位一样，及时你现在没有车，但是你没买车位，等你有了车，你也不能停；所以，我们在保存方法时，如果页面没有录入值，我们默认用一个别的值来占位（注意别让mybatis的if标签给过滤了）就可以了；

原代码：

let bigImgList = this_.variables.bigImgList;
bigImgList.forEach(item => {
  item.imgUrl = item.url;
});

修改后的代码：

    let bigImgList = this_.variables.bigImgList;
    if (bigImgList!=null && bigImgList.length>0){
      bigImgList.forEach(item => {
        item.imgUrl = item.url;
      });
    }else{
      bigImgList = [];
    }

完毕~

三、总结

欢迎关注我的
CSDN博客： https://blog.csdn.net/River_Continent
微信公众号：幕桥社区

知乎：张牧野， https://www.zhihu.com/people/zhang-mu-ye-37-76/activities
简书： https://www.jianshu.com/u/02c0096cbfd3