After spending several days searching for an example to guide me without success, I am turning to SO with my specific use case.
I am currently working on a Bootstrap Vue layout where I need to load dates into 12 buttons corresponding to months and display a popover above each button with the matching dates from Firebase. I have managed to achieve almost the desired behavior by using a v-for loop to iterate through an array of objects containing month names and arrays of matching dates. Each button is laid out based on the month name, with another v-for loop inside for the popover to load all the Firebase dates.
In addition, I have a computed property that shortens the incoming Firebase dates to their abbreviated month names and then uses nested loops to match the shortened months to the existing arrays in my months array of objects. For clarity, I will include images below:
https://i.sstatic.net/K3Ul6.jpg
https://i.sstatic.net/4M7dT.jpg <-- Each button contains a popover like this, I want to matched the months in the popover to the right month button and only that one
My current challenge lies in connecting my computed property to the nested v-for loop of the popover so that only the matching dates show up for each month. Initially, I attempted to move the v-for to the button, which resulted in multiple buttons being created for each incoming date and each month name in the first v-for loop. Most solutions I've found for nested v-fors involve data coming from a single array, whereas in my case, I have separate data in separate arrays that I want to match (e.g., January button should only have January dates). Below are the relevant code blocks I currently have:
From the template:
<template>
<b-container>
<b-row>
<div v-for="(month,index) in months" :key="index">
<b-button
:id="`date-popover-${month.name}`"
class="shadeCircleColor"
:to="{ name: 'PaymentsDetailPage', params: { id: id } }"
>
{{month.name}}
</b-button>
<b-popover
:target="`date-popover-${month.name}`"
triggers="hover"
placement="top"
>
<div v-for="(payment, index) in payments" :key="index">
{{payment.createdOn}}
</div>
</b-popover>
</div>
{{ matchedMonths }}
</b-row>
</b-container>
</template>
From the data():
data() {
return {
dates: [], <-- dates from firebase will show here in from a property i.e(dates.createdOn)
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: 'Sep', createdOn: [] },
{name: 'Oct', createdOn: [] },
{name: 'Nov', createdOn: [] },
{name: 'Dec', createdOn: [] },
],
};
},
From the computed property:
computed: {
matchedMonths() {
for(let i in this.months) {
for(let j in this.dates) {
var dates = new Date(this.dates[j].createdOn)
const shortMonth = dates.toLocaleString('default', { month: 'short' });
if(shortMonth === this.months[i].name) {
this.months[i].createdOn.push(shortMonth)
console.log(this.months[i].name, this.months[i].createdOn)
}
}
}
}
},
At this point, I am struggling to display the matched months properly in the popover's v-for loop so that each month shows only its respective dates. One possible issue could be with my nested for-in loops, as attempting to add the shortened months to the months.createdOn array causes all buttons to disappear. I have also tried using the .map function on the dates array and matching it to the months array, but encountered undefined errors when pushing those dates in. Here is the code illustrating these attempts:
const justDates = this.payments.map(payment => {
return new Date(payment.createdOn).toLocaleString('default', { month: 'short'})
})
console.log(justDates)
const months= this.months.map(month => {
if(justDates === month.name){
return month.createdOn.push(justDates)
}
})
console.log(months)
I am unsure about where to place the matchedMonths computed property for it to work correctly, or if using a v-if statement within either v-for loop to check if the month.name matches the shortened month name of the incoming dates would be a better approach. Any guidance on achieving the desired solution is appreciated.
Additionally, I need assistance with converting the shortened month dates back into their full month, day, and year string once the correct shortened months are matched to their buttons. Should this conversion logic also reside within the computed property? Thank you for your time.