Hello, I have been searching for a solution to my current issue without much success. The problem revolves around retrieving dates from Firebase and populating them into UI elements in my Vue app. My end goal is to align each date with the corresponding month in Vue and display them accurately on the interface. However, I am encountering difficulties as the data does not display properly and triggers an infinite loop warning.
Below is the code snippet that I have been working on:
data() {
return {
dates: [], <---- these dates will be fetched from Firebase
months: [
{name: 'Jan', createdOn: [] },
{name: 'Feb', createdOn: [] },
{name: 'Mar', createdOn: [] },
{name: 'Apr', createdOn: [] },
{name: 'May', createdOn: [] },
{name: 'Jun', createdOn: [] },
{name: 'Jul', createdOn: [] },
{name: 'Aug', createdOn: [] },
{name: 'Sept', createdOn: [] },
{name: 'Oct', createdOn: [] },
{name: 'Nov', createdOn: [] },
{name: 'Dec', createdOn: [] },
]
};
},
methods: {
logNewDate() {
let mons = this.months
let dates = this.dates
dates.forEach(date => {
if(!mons[0].createdOn.includes(dates)) {
mons[0].createdOn.push(date.createdOn)
}
})
console.log(mons[0].name, mons[0].createdOn)
},
}
<div v-for="month in months" :key="month.name">
<b-button
class="btn-circle btn-md"
>
{{ month.name }}
</b-button>
</div>
{{ logNewDate() }}
In my initial approach, I used an array of month strings which resulted in multiple duplicate displays. To resolve this, I included an object within the "months" property where I can match incoming dates to their designated months. Despite successfully storing the dates using the forEach loop in the "logNewDate" function, it leads to repeated additions of the same dates causing an endless loop. Implementing checks like "includes()" did not prevent this issue.
If you could assist in identifying the root cause of this looping behavior and provide guidance on rectifying it, I would greatly appreciate it. Additionally, I am aware of the hardcoded indexes in the forEach loop and aim to make them dynamic based on the month saved from Firebase data.
The error screenshots can be viewed here: https://i.sstatic.net/IcfWC.png https://i.sstatic.net/8afMi.jpg