Encountering a "Maximum call stack size exceeded" error while attempting to use the .push() method in a VueJs Phonebook application with nested table data

I am currently in the process of developing a simple Phonebook application that includes a table with nested data. My framework of choice for this project is element ui.

The primary function of this app is to add new contacts and nested contacts when selecting a contact as a "leader". New contacts and nested contacts for preset contacts are being added successfully.

However, I encountered an error stating "Maximum call stack size exceeded" when attempting to add a nested contact to a newly created contact. Here is the code snippet:

App.vue

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

  // Rest of the original code here...

If anyone can help me identify the issue and provide insights on how to add child contacts to all nesting levels, I would greatly appreciate it. Thank you in advance!

Answer №1

There might be a slight improvement needed in the onFormSubmit function. Currently, it checks if (!(data.leader)) to determine if the leader field is not an empty string, represented as leader: ''. However, an empty string is not equivalent to null. It would be more accurate to check if (data.leader != '').

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

Tips for concealing a div when clicking on an element solely with CSS

I am currently working on creating a CSS Main Menu in Vue. The functionality is such that it pops up when the mouse hovers over it, and hides when the mouse moves out. However, I am facing an issue with hiding the menu when clicking on a hyperlink a. Any s ...

Tips on transmitting form information from client-side JavaScript to server-side JavaScript with Node.js

Having created an HTML page with a form, my goal is to capture user input and store it in a JSON file. However, I've run into some confusion... In the process, I utilized the express module to set up a server. My mind is juggling concepts such as AJA ...

Utilizing Vue.js with XML data streams

I ran into a problem while working on my personal site with Vue.js. My goal is to display the five latest posts from my Jekyll blog on the page. To achieve this, I am checking the feed at http://todayilearned.dk/feed.xml. However, I'm struggling to ...

The useEffect hook in ReactJs is triggering multiple times

Encountering challenges while developing an Infinite scroll using ReactJs and Intersection observer API. Upon initial application load, the API gets called twice instead of once. This behavior may be due to strict mode, although not confirmed. Additionall ...

I can't seem to get the npm run dev command to work properly after setting up

After successfully setting up React JS with Vite and running npm i, I encountered an error when trying to run npm run dev: > [email protected] dev > vite E:\nasheednaldo\node_modules\rollup\dist\native.js:64 ...

Troubleshooting: Issue with Chrome's CSV Export Functionality in JavaScript/AngularJS

Currently, I am troubleshooting an issue with exporting a CSV file from a data table on a web application. The export functionality works fine on all browsers except for Chrome when the export button is clicked. I have been trying to solve this problem for ...

Steps to implement a fixed toolbar in Chrome while ensuring optimal functionality for all other fixed elements

Currently in the process of developing a Chrome extension, I'm interested in implementing a 60px height toolbar that remains visible at the top of all pages. I've researched various tutorials and articles on using CSS translateX, but encountered ...

Creating PDFs in iOS and Android using Ionic framework

Seeking assistance with resolving this issue. I have researched extensively on Google, jspdf, pdfmake.org, inappbrowser plugins, but have been unsuccessful in getting my Ionic project to function properly. The goal is to create a simple form that includes ...

In Node.js, when using the `new Date(year, month, date)` constructor, the date is automatically converted to UTC

var dateInCST; //Obtaining the current date in CST time zone. /*Trimming the time portion and retaining only the date.*/ var onlyDateInCST = new Date(dateInCST.getUTCFullYear(), dateInCST.getUTCMonth(), dateInCST.getUTCDate()); console.log(o ...

Tips for implementing manual gravity effects on objects in cannon.js?

Is there a proper way to control gravity on individual objects without compromising collision events or rotation velocity? I came across this issue but seeking a more comprehensive solution. In my situation, I need player physics to function normally, wh ...

Angular 8 fails to retain data upon page refresh

I have a property called "isAdmin" which is a boolean. It determines whether the user is logged in as an admin or a regular user. I'm using .net core 2.2 for the backend and Postgre for the database. Everything works fine, but when I refresh the page, ...

Managing Emitted Events in Vue.js Components within Components: A Guide

I have created a Toolbar Item component as follows: <template> <div class="flex cursor-pointer items-center justify-center rounded-full border-2 border-gray-300 p-1 shadow-sm transition-all duration-300 hover:scale-110 hover:bg-black ho ...

Obtain JSON data through an HTTP POST call

Here is a function that I have, which was mainly borrowed from the solution to another problem on SO: function sendPostRequest(url, data) { request( { url: url, method: "POST", json: true, body: data }, function(error, response, body) ...

Transform the JSON response from MongoDB into a formatted string

var db = mongoose.connection; const FoundWarning = db.collection('warning').find({UserID: Warned.user.id, guildID: message.guild.id}).toArray(function(err, results) { console.log(results); }) I have been attempting to ...

What is the most effective way in MongoDB to insert data only if it does not already exist in the database?

Is there an optimal way to insert data into MongoDB only if it doesn't already exist in the table? The unique field for searching is hash, which is also indexed. router.post('/', async (req, res) => { try{ var id = null const ...

What is the best way to create a sticky image that stays in place while scrolling using locom

I am trying to create a sticky image while scrolling using locomotive-scroll and VueJS. https://i.sstatic.net/mMvI2.jpg I want the content on the left to move, but not the image on the right. My goal is to make the image stick when its top reaches the to ...

Fill the table according to the selected criteria

One issue I am facing is that the table does not get cleared when using the arrow keys to navigate through select options. As a result, the data from the JSON is populated in sequence and does not match the currently selected option. Does anyone have any ...

Vue 2 draggable does not maintain reactivity when the v-model value consists of a parent tag's iterable

Utilizing Vue 2 alongside Vuex, the incoming object gets organized into distinct sub-objects according to the classCategory value. Could it be failing because the v-model value in draggable is a key sourced from the parent tag object? <div class="c ...

unable to gather information from suppliers

I'm currently building a login page with nextjs and spotify js, but I've run into the following error https://i.sstatic.net/cKiM8.png Here is the code snippet that is causing the issue: import React from 'react' import { getProviders ...

How to completely disable a DIV using Javascript/JQuery

Displayed below is a DIV containing various controls: <div id="buttonrow" class="buttonrow"> <div class="Add" title="Add"> <div class="AddButton"> <input id="images" name="images" title="Add Photos" ...