VUE數(shù)組內(nèi)新push的對象被修改，其他的對象屬性同時被修改

代碼結(jié)構(gòu)：頁面根據(jù)pageList這個數(shù)組里面的對象，動態(tài)渲染。有一個設(shè)置欄，上面有很多按鈕對應(yīng)一個個不同的模塊，每次點擊就會往pageList內(nèi)添加對象，頁面從而渲染出不同的模塊，模塊時可以復用的。當我添加了兩個一樣的模塊，例如輔助區(qū)域，當我點擊右側(cè)輔助區(qū)域設(shè)置欄的時候，兩個輔助區(qū)域的是一起動的！這就是問題所在!別的模塊也是如此！

pageList默認是空；

    <!-- 根據(jù)pageList列表內(nèi)部對象的status值，判斷使用哪種樣式模板 -->
                                    <div v-for="(item,index) in pageList" :key="index">
<!-- 輔助區(qū)域 -->
                                        <div class="support_box" v-if="item.status==1">
                                            <button @click="showIndex(item.status,index)" :style="{backgroundColor: item.supportInfo.lineBgc}">   <!--這里對應(yīng)的是輔助分割線的背影顏色==》backgroundColor-->
                                                <!-- 輔助空白 -->
                                                <div v-show="item.supportInfo.supportStatus==0" class="empty_box" :style="{ backgroundColor: item.supportInfo.emptyBgc, height: item.supportInfo.emptyHeight + 'px' }"></div>
                                                <!-- 輔助線段 樣式太多，只能采取對象-->
                                                <!--對應(yīng)關(guān)系==》borderTopColor:線段顏色  borderTop/style/color/width:對應(yīng)線段的樣式顏色寬度 marginTop/bottom：對應(yīng)上下邊距 -->
                                                <div v-show="item.supportInfo.supportStatus==1" class="line_box" :style="{ borderTopColor: item.supportInfo.lineColor,borderTopStyle:item.supportInfo.lineStyle,borderTopColor:item.supportInfo.lineColor, borderTopWidth: item.supportInfo.lineHeight + 'px' ,marginTop: item.supportInfo.lineMargin + 'px',marginBottom: item.supportInfo.lineMargin + 'px'}"></div>
                                                <!-- 模塊刪除按鈕 -->
                                                <div class="del_li" @click="model_del_li(index)">X</div>
                                            </button>
                                            <!-- #######輔助區(qū)域欄 #####-->
                                            <!-- 先根據(jù)status判斷該顯示那一種設(shè)置框，然后判斷具體是哪一個的設(shè)置框，每次只顯示一個 -->
                                            <div v-show="1==isShow && index==listIndex" class="support_set">
                                                <el-form label-width="80px">
                                                    <el-form-item label="輔助類型">
                                                        <el-radio-group v-model="item.supportInfo.supportStatus">
                                                            <el-radio label="0">輔助空白</el-radio>
                                                            <el-radio label="1">輔助分割線</el-radio>
                                                        </el-radio-group>
                                                    </el-form-item>
                                                    <!--          ####### 輔助空白設(shè)置欄     ############        -->
                                                    <div v-show="item.supportInfo.supportStatus==0">
                                                        <el-form-item label="背景顏色">
                                                            <el-color-picker v-model="item.supportInfo.emptyBgc"></el-color-picker>
                                                        </el-form-item>
                                                        <el-form-item label="區(qū)域高度" class="slider_box">
                                                            <el-slider class="slider_set" v-model="item.supportInfo.emptyHeight" :min="1" :max="40" show-stops>
                                                            </el-slider>
                                                            <span>{{item.supportInfo.emptyHeight}}px</span>
                                                        </el-form-item>
                                                    </div>
                                                    <!--         ###########      輔助分割線設(shè)置欄       ################           -->
                                                    <div v-show="item.supportInfo.supportStatus==1">
                                                        <el-form-item label="背景顏色">
                                                            <el-color-picker v-model="item.supportInfo.lineBgc"></el-color-picker>
                                                        </el-form-item>
                                                        <el-form-item label="線段顏色">
                                                            <el-color-picker v-model="item.supportInfo.lineColor"></el-color-picker>
                                                        </el-form-item>
                                                        <el-form-item label="線段樣式">
                                                            <el-radio-group v-model="item.supportInfo.lineStyle">
                                                                <el-radio label="solid">實線</el-radio>
                                                                <el-radio label="dashed">虛線</el-radio>
                                                                <el-radio label="dotted">點狀線</el-radio>
                                                            </el-radio-group>
                                                        </el-form-item>
                                                        <el-form-item label="線段高度" class="slider_box">
                                                            <el-slider class="slider_set" v-model="item.supportInfo.lineHeight" :min="1" :max="40" show-stops>
                                                            </el-slider>
                                                            <span>{{item.supportInfo.lineHeight}}px</span>
                                                        </el-form-item>
                                                        <el-form-item label="上下邊距" class="slider_box">
                                                            <el-slider class="slider_set" v-model="item.supportInfo.lineMargin" :min="1" :max="40" show-stops>
                                                            </el-slider>
                                                            <span>{{item.supportInfo.lineMargin}}px</span>
                                                        </el-form-item>
                                                    </div>
                                                </el-form>
                                            </div>
                                        </div>

    { //輔助區(qū)域數(shù)據(jù)
                        status: 1,
                        title: "輔助區(qū)域1",
                        supportInfo: {
                            supportStatus: "0", //輔助類型 0：空白  1：分割線 ==》默認是輔助空白0
                            emptyBgc: "#000", //空白區(qū)域背景顏色
                            emptyHeight: "20", //空白區(qū)域高度==>不需要帶px單位
                            //下面是輔助分割線區(qū)域
                            lineBgc: "#fff", //分割線背景顏色
                            lineColor: "#0099bc", //分割線線段顏色
                            lineStyle: "solid", //線段樣式：實線solid  虛線dashed  點狀線dotted  ==》默認實線solid
                            lineHeight: "10", //線段高度==>不需要帶px單位
                            lineMargin: "10", //線段上下邊距==>不需要帶px單位
                        }
                    }

自己嘗試的解決方法：為左側(cè)的展示欄添加 :key="index" 為右側(cè)的設(shè)置欄添加 :key="index" 以及每次將默認的輔助區(qū)域數(shù)據(jù)push到pageList之前為它增加一個鍵值對(--time:new Date()--)，聲明它的唯一性！
但是問題依舊，感覺像是右側(cè)的設(shè)置欄被指向同一個數(shù)據(jù)！
下面是pageList添加邏輯的代碼，allList是數(shù)組，內(nèi)部是每個模塊默認的數(shù)據(jù)，根據(jù)點擊的index值判斷應(yīng)該push哪一組數(shù)據(jù)

addModel(index) {
                this.pageList.push(this.allList[index])
            },

修改了代碼如下：

let data = Object.assign({}, this.allList[index]);
this.pageList.push(data)

問題依舊：

按照諾頓大師兄的方法已經(jīng)解決：

let data = Object.assign({}, JSON.parse(JSON.stringify(this.allList[index])));
this.pageList.push(data)