VueJS，一个无限的对象创建和错误循环："Maximum call stack size exceeded"

Question

上次我问了一个类似但更复杂的问题。我想问一个具体的问题。

有一个接受对象作为输入的函数:

onFormSubmit (data) {
const newObj = {
...data,
id: Math.random()
}
if (!data.leader) {
this.list.push(newObj)
this.saveList()
} else {
for (let i = 0; i < this.list.length; i++) {
if (this.list[i].id === data.leader) {
this.list[i].children.push(newObj)
this.saveList()
}
}
}
}
saveList () {
const parsed = JSON.stringify(this.list)
localStorage.setItem('list', parsed)
}

输入:

{leader: 42, name: "Name", number: "12345", id: "", children: Array(0)}

数据结构:

data: () => ({
list: [{
leader: '',
name: 'Silvia',
number: [phone],
id: 17,
children: [{
leader: 17,
name: 'Joe',
number: [phone],
id: 191,
children: []
}]
},
{
leader: '',
name: 'Victor',
number: [phone],
id: 42,
children: [{
leader: 42,
name: 'Sam',
number: [phone],
id: 202,
children: [{
leader: 202,
name: 'Mona',
number: [phone],
id: 2092
}]
}]
}]
}),

该函数的任务是将该对象添加到对象数组中，如果!data.leader = true为顶级元素，如果!data.leader = false.为子元素

新元素被正确添加。

新的子元素被正确地添加到预写的数据中。

但是当尝试向新创建的元素添加子元素时，会出现一个无限循环并出现错误。函数开始无休止地创建对象的副本。

我做错了什么?

Answer 1

好吧，我是这样解决的:

onFormSubmit (data) {
let newId = Math.floor(Math.random() * 100) + data.leader
let newObj = {}
newObj = {
...data,
id: newId
}
if (!data.leader) {
this.list.push(newObj)
this.saveList()
} else {
for (let i = 0; i < this.list.length; i++) {
if (this.list[i].id === newObj.leader) {
this.list[i].children = [newObj]
this.saveList()
}
}
}
},