带有嵌套表数据的 VueJs 电话簿应用程序错误：尝试 .push()

如何解决带有嵌套表数据的 VueJs 电话簿应用程序错误：尝试 .push()

我正在尝试构建简单的电话簿应用程序，其中包含表格和嵌套数据。我正在使用元素 ui。

当您选择联系人“领导者”时，此应用程序必须做的主要事情是添加一个新联系人和一个新的嵌套联系人。 正确添加了预设联系人的新联系人和新嵌套联系人。

但是，当我尝试将嵌套联系人添加到刚刚创建的联系人时，会出现错误“超出最大调用堆栈大小”。

代码如下：

App.vue

<template>
  <div id="app">
    <ContactsTable :list="list"/>
    <ModalForm :list="list" @submitForm="onFormSubmit"/>
  </div>
</template>

<script>
import ContactsTable from "@/components/ContactsTable";
import ModalForm from "@/components/ModalForm";

export default {
  name: 'App',components: {
    ContactsTable,ModalForm,},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,}]
        }]
      }],}),methods: {
    onFormSubmit(data) {
      const newObj = {
        ...data,id: Math.random()
      };
      if (!(data.leader)) {
        this.list.push(newObj);
      } else {
        for(let i = 0; i < this.list.length; i++) {
          if(this.list[i].id === data.leader) {
            this.list[i].children.push(newObj)
          }
        }
      }
    }
  }
}
</script>

<style>
#app {
  font-family: Avenir,Helvetica,Arial,sans-serif;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  color: #2c3e50;
  margin: auto;
}
</style>

ModalForm.vue

<template>
    <el-card class="modal-wrap" shadow="never">
      <el-button type="primary" @click="dialogVisible = true">New contact</el-button>

      <el-dialog class="dialog" :visible.sync="dialogVisible">
        <el-form :model="form" :data="list" :rules="rules" ref="addItemForm" label-position="left" label-width="120px">
          <el-form-item label="Name" prop="name">
            <el-input v-model="form.name" autocomplete="off"/>
          </el-form-item>

          <el-form-item label="Phone number" prop="number">
            <el-input v-model="form.number" autocomplete="off"/>
          </el-form-item>

          <el-form-item label="Team leader" prop="leader">
            <el-select v-model="form.leader">
              <el-option v-for="item in list" :key="item.id" :label="item.name" :value="item.id"/>
            </el-select>
          </el-form-item>

          <el-form-item class="form-action-buttons">
            <el-button>Cancel</el-button>
            <el-button type="primary" @click="onSubmit">Save</el-button>
          </el-form-item>
        </el-form>
      </el-dialog>
    </el-card>
</template>

<script>
export default {
  name: "ModalForm",props: {
    list: {
      type: Array,default: () => ({})
    }
  },data() {
    return {
      dialogVisible: false,form: {
        id: '',name: '',number: '',leader: '',children: []
      },rules: {
        name: [
          { required: true,message: 'Name required',trigger: 'blur' },],number: [
          { required: true,message: 'Phone number required',}
    };
  },methods: {
    onSubmit() {
      this.$emit("submitForm",{ ...this.form });
      this.$refs.addItemForm.resetFields();
    }
  }
}
</script>

<style scoped>
.modal-wrap {
  max-width: 40%;
  margin: auto;
  border: none;
}
.dialog {
  margin: auto;
  max-width: 70%;
}
.form-action-buttons {
  display: flex;
}
</style>

ContactsTable.vue

<template>
  <div class="contacts-list-wrap">
    <el-card :header="header" shadow="never">
      <el-table :data="list" row-key="id" :tree-props="{children: 'children',hasChildren: 'hasChildren'}" border stripe>
        <el-table-column prop="name" label="Name" sortable/>
        <el-table-column prop="number" label="Phone" sortable/>
      </el-table>
    </el-card>
  </div>
</template>

<script>
export default {
  name: "ContactsTable",data: () => ({
    header: "Phonebook"
  }),}
</script>

<style scoped>
.contacts-list-wrap {
  max-width: 40%;
  margin: auto;
}
</style>

请帮我找出可能是什么原因？

我还需要了解如何将子联系人添加到所有嵌套级别...

感谢您的回复！

解决方法

我不确定这是否能解决任何问题，但在您的 onFormSubmit 函数中，您检查 if (!(data.leader))，我认为它旨在捕获如果 leader 不是空字符串，leader: '' 在您的list。空字符串不为空，我认为你应该检查 if (data.leader != '')