實現(xiàn)深復(fù)制代碼片段:
<li v-for="(items, i) in shopFileListData" @click="onCheckBox(items)" :key="items.shopFileId" :class="{'li-checked': liChecked(items)}">
<div class="source-file" style="width: 200px;">
.....
</div>
</li>
export default {
data() {
return {
shopFileListData:[],
fileList:[],
}
},
computed:{
allChecked:{
get: function() {
return this.checkedCount == this.shopFileListData.length;
},
set: function (value) {
if(value){
this.checked = this.shopFileListData.map((items) => {
this.fileList.push(items);
return items.shopFileId+'';
})
//this.fileList = this.shopFileListData;
console.log(JSON.stringify(this.fileList))
}else {
this.checked = [];
this.fileList = []
}
}
},
checkedCount: {
get: function() {
return this.checked.length;
}
},
},
}
this.shopFileListData為json數(shù)組,通過map()把里面的items,push到this.fileList中,這樣進行了深復(fù)制。
注:
用ES6函數(shù)箭頭,才使this.fileList的this指向全局vue對象;
items.shopFileId+''是為了把items.shopFileId轉(zhuǎn)化成字符串類型;