Continuously adding items to an array can lead to an endless loop

Within a v-for loop, I have a method called in a child div.

<div v-for="(item,index) in timesheetRequests">
    <h6 class="card-title mt-3"  :id="'req_'+index" v-if="yearMonthInsertion(item,index)">Something</h6>
       .
       .
       .
</div>

This is how the method is defined:

  yearMonthInsertion:function(item,index){
     var meta = item["meta"]
     var last_updated_on  = meta['last_updated_on']
     last_updated_on = last_updated_on.replaceAll("-","/")

     var requestUpdateDate = moment(last_updated_on,"YYYY/MM/DD")

     var month = requestUpdateDate.format("MMMM")
     var day   = requestUpdateDate.format('D');
     var year  = requestUpdateDate.format('YYYY'); 

     console.log("HERE...ll")
     var obj = {}
     obj["month"] = month
     obj["status"] = true

     this.date_element.push(obj)

     console.log("THIS....")
     console.log(this)

  }

https://i.sstatic.net/fg8Ct.png

Removing this line from the code fixes the error. The goal is to add items to the array during the v-for loop execution:

this.date_element.push(index)

Thank you for your help!

Answer №1

v-if may not be suitable for running this code as the function's execution time and frequency are unpredictable. By pushing into date_element without clearing it, the array length will continuously increase.

Consider defining this.date_element as a computed property to ensure its always up to date.

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

Unable to choose anything beyond the initial <td> tag containing dynamic content

Struggling to implement an onclick delete function on dynamically selected elements, but consistently encountering the issue of only selecting the first element each time. // Function for deleting entries $("#timesheet").on('click', &ap ...

Tips for selecting multiple potions from a JSON file in a React Native project

I need help with highlighting multiple options from an array in React Native. Currently, when I click on an option, it highlights that option but de-highlights the previous one. How can I modify my code to allow for selecting and highlighting multiple opti ...

Using JavaScript to connect SQL query results to a specific function

Hello everyone, I find myself in a bit of a pickle while working with WebOS enyo. Although the fact that I am using enyo is irrelevant to my question... Here is a method I have: clickPopulate: function(){ // Do some SQL }; I am utilizing a data ...

Steps to configure a proxy in Nuxt3

I can't figure out why my proxy settings in nuxt 3 are not working properly. When I try to fetch data, I notice the URL is incorrect in the development tools. https://i.sstatic.net/fSCuJT6t.png Here is my code. What am I doing wrong? nuxt.config.js e ...

The header component in Vue does not display updated data before the router enters

I am facing an issue while trying to update data before entering a route in VueJs 2. In my component, I attempted the following: data: function () { return { name: "test" } }, beforeRouteEnter (to, from, next) { next(vm =& ...

The damping effect in three.js OrbitControls only activates when the mouse is pressed, however there is no damping effect once the

I find it difficult to articulate: Currently, I am utilizing OrbitControls in three.js and have activated damping for a smoother rotation with the mouse. It is somewhat effective but not entirely seamless. When I click and drag, the damping feature works ...

Creating "search result pages" with HTML, PHP, Javascript, and MySQL

Consider the scenario where you have a table with two columns: id and name, containing thousands of rows. You have a search engine that allows searching by free text, using the query: SELECT * FROM `table` WHERE `name` LIKE '%$search%' The res ...

Tips for verifying a text input as an email address using JQuery

Can someone help me with writing an if statement that checks if two fields are empty and confirms if one of them is a valid email address? Also, how can I validate if the email address entered is indeed valid? var fullname = $("#name").val(); var emai ...

Executing iterative asynchronous calls in Node.js

As I delve into mastering Node.js, I've set up my application, defined routes, and created a controller. Currently, I'm working with an external API where I pass different IDs and need to compare the responses against specific values. To achieve ...

Assistance with Ajax for content loading

Greetings, I am encountering an issue with the following code snippet (located in a js file named ajax.js) $(function(){ $("#loading").hide(); $("ul#nav a").click(function(){ page = "content/"+$(this).attr('href') ...

"At the beginning of an array in JavaScript, I often encounter the issue of receiving

Here is some code that I created: function get_coordinates(container) { var x; var y; var divs = container.getElementsByTagName('div'); Array.from(divs).forEach(div => { y += div.offsetTop+" "; x += d ...

Is it possible to remove Google Markers?

I am facing an issue with rendering Markers on the map in my React component. Whenever I update the markers array, the new markers appear but the old ones remain on the map. For example, if I change the coordinates in the parent component, both the old and ...

How can I convert a MongoDB document into a DTO in NestJS?

I'm currently working with a data layer that interacts with a MongoDB database. My goal is to only handle MongoDB documents in this layer without exposing the implementation details to my services. My current approach involves the following code: // ...

Assign the path parameter to the component key in the Route

One of the routes in my application is defined as shown below: <Route exact path="/licenses/:type?" component={Licenses} /> I want the component to re-render every time the type parameter changes. According to react-router documentation, I ...

Issues with styled-components media queries not functioning as expected

While working on my React project with styled components, I have encountered an issue where media queries are not being applied. Interestingly, the snippet below works perfectly when using regular CSS: import styled from 'styled-components'; exp ...

Issue encountered while executing tasks in the Gruntfile.js file

Having trouble with Grunt concatenating my CSS files into one named production.css Below is the output I received from the command prompt: C:\Users\josha\Desktop\Repos\AJAX Project - Grunt Test>grunt C:\Users\josha& ...

Having difficulty navigating Vue.js 2 routing with browser history issues

Recently encountered a dilemma - I pass data to the props of the /router-link/ tag, when I click on the link, it takes me to the article and retrieves the data correctly. However, if I hit the "back" button in the browser and then "forward," the article ap ...

Retrieving data from a CSV file located on a different domain

A client is in need of displaying a dynamic list of addresses on their website, but the content management system in use lacks the necessary functionality. Additionally, there is no access to the server's file system or the ability to write server-sid ...

Updating token (JWT) using interceptor in Angular 6

At first, I had a function that checked for the existence of a token and if it wasn't present, redirected the user to the login page. Now, I need to incorporate the logic of token refreshing when it expires using a refresh token. However, I'm enc ...

Pressing the tab key makes all placeholders vanish

case 'input': echo '<div class="col-md-3"> <div class="placeholder"> <img src="images/person.png" /> &l ...