Javascript VueJS，对象创建和错误的无休止循环；超过最大调用堆栈大小；

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

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

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)
    }

数据结构：

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

该函数的任务是将此对象添加到对象数组中，如果

，则添加到顶级！data.leader=true

，如果

，则作为子元素！data.leader=false。

新元素已正确添加

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

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

---

我做错了什么？

好吧，我这样解决：

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()
          }
        }
      }
    },

onFormSubmit（数据）{
让newId=Math.floor（Math.random（）*100）+data.leader
设newObj={}
newObj={
…数据，
id:newId
}
如果（！data.leader）{
this.list.push（newObj）
这个文件名为saveList（）
}否则{
for（设i=0；i

您是否有任何

computed

属性，大多数情况下无休止的循环来自计算属性中的递归调用。@localdev我有这样一个：computed:{isEmpty（）{return！Object（this.list）。length}}它检查对象是否为空并影响警报的显示。

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()
          }
        }
      }
    },