Vue 為data中的空數組動態添加對象

情況是這樣的：在data中定義了一個數組list，一個對象obj，如下

data(){
	return {
		list: [],
		obj: {
			name: ‘’,
			age:’’,
			hobby: []
		}
	}
}

在操作動態往list中push obj 的，並使用list循環表單元素。如下

for (let index = 0; index <3; index++) {
       this.list.push(this.obj);
 }

以上的方式在循環中導致v-model一直是相同的，原因是push進數組的都是同一個變量。
數組添加對象並是添加的對象支持雙向響應的方法：
使用push：

for (let index = 0; index <3; index++) {
       this.list.push({
	      name: ‘’,
	      age:’’,
	      hobby: []
      ****});
 }

使用splice：

for (let index = 0; index <3; index++) {
       this.list.splice(index, 0, {
		name: ‘’,
		age:’’,
		hobby: []
	});
 }

根本原因在於插入的對象，是否是在data中定義的。

又是一個坑自己的神操作 ╮(╯▽╰)╭