【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