JS把对象push进数组后，前面的值被后面的值覆盖，动态增加表单并可折叠

JS把对象push进数组后，前面的值被后面的值覆盖

今天在push对象进数组的时候遇到一个问题，发现后面的值会覆盖前面的值，每太明白是怎么回事，然后就上网查了查

参考文章：https://blog.csdn.net/Wyatt_1/article/details/125892839

原因分析：

在把某个对象push进数组里的时候，需要注意对象定义的作用域，因为是在外面的定义的对象，所以每次该对象的地址是一样的，所以数组中保存的是该对象的地址，当最后一次给该对象赋值时，由于是同一个对象，所以最后一次给该对象赋值时会将前面的值给覆盖掉，其实第二次已经把第一次的值覆盖过了

1. 每次循环都初始化一次，每次都是新的对象，对象指向的地址都不一样，这样就不会被覆盖了

for (let i = 0; i < 5; i++){
   let Obj={id:0};
   Obj.id= k;
   Array.push(Obj);
}

2. 将对象转换为Json格式后再push数组中
   array.push(JSON.parse(JSON.stringify(Obj)))

动态增加表单并可折叠

可折叠效果就是用的 uView 的 u-collapse 组件实现

这里的大概逻辑就是循环一个数组，表单需要填写的值就在这个数组中，当我们新增一个表单时就去复制一份表单。然后push进循环的数组中就可以新增一个表单了

因为有多个表单所以要注意表单的名字是不一样的，也是动态的

<u-collapse class="collapseStyle">
	<u-collapse-item @change="handleCollapse($event, index)" class="itemStyle" :title="'套餐' + (index + 1)"
	  v-for="(item, index) in skus" :key="index">
		<u-form label-width="200rpx" :ref="'skuForm' + (index + 1)" :model="item">
			<u-form-item label="型号" prop="spuData" required >
				<u-input v-model="item.spuData"></u-input>
			</u-form-item>
			<u-form-item label="描述" prop="skuData"  required>
				<u-input v-model="item.skuData"></u-input>
			</u-form-item>
			<view class="flex justify-center aligns-center">
				<view class="shop-delete-btn" @click="handleBrandDelete(index)">删除</view>
			</view>
		</u-form>
	</u-collapse-item>
</u-collapse>
<view class="formBtn" @click="handleAddBrand">
	<text style="margin-left: 22rpx">新增</text>
</view>

<script lang="ts">
import { Vue, Component } from 'vue-property-decorator';

const skuRules = {
	spuData: [
		{
			required: true,
			message: '请输入型号',
			trigger: ['change', 'blur']
		}
	],
	skuData: [
		{
			required: true,
			message: '请输入对该型号的描述',
			trigger: ['change', 'blur']
		}
	],
}
export default class release extends Vue {
	private defaultSkus = {
		spuData:'',
		skuData:''
	}
	private skus=[
		{
			spuData:'',
			skuData:''
		}
	]
		
	handleCollapse(obj: { index: number; show: boolean }, index: number) {
		this.form.skus[index].collapsed = !obj.show;
	}
	
	handleBrandDelete(index: number) {
		this.form.skus.splice(index, 1);
	}
	
	handleAddBrand() {
	  const brand = this.$util.deepClone(this.defaultSkus);
	  const index = this.skus.push(brand);
	  this.$forceUpdate();
	  this.addBrandRules(index);
	}
	
	addBrandRules(index: number = 1) {
	  this.$nextTick(() => {
	    (this.$refs['skuForm' + index] as any)[0].setRules(skuRules);
	  });
	}
	
	
}
</script>