Can't update dynamic title in for loop using vue - vue.js

Question

I have an array of objects which I want to list with titles for the month. Not every object in the loop will have a title, it would only show the title if the month in the sequential objects change
So for example the object might look like
data [
{date:'January', info: 'some other data'},
{date:'January', info: 'some other data'},
{date:'February', info: 'some other data'},
{date:'February', info: 'some other data'},
{date:'March', info: 'some other data'},
{date:'March', info: 'some other data'},
];
The loop looks something like this
<div v-for="d in data" :heading="getDate(d.date)" >
{{ heading }}
<p> {{ d.info }}</p>
</div>
The showDate function is in the methoods section
data() {
return {
currentmonth: ""
}
},
methods: {
getDate(date) {
if (date != this.currentmonth) {
this.currentmonth = date
return "<h2>" + date + "</h2>"
} else {
return ""
}
}
So I only want to show the H2 when the date changes between objects in the loop, so the out come would be
<div>
<h2>January<h2>
<p>some other data</p>
</div>
<div>
<p>some other data</p>
</div>
<div>
<h2>February<h2>
<p>some other data</p>
</div>
<div>
<p>some other data</p>
</div>
<div>
<h2>March<h2>
<p>some other data</p>
</div>
<div>
<p>some other data</p>
</div>
but the outcome I keep getting is
[Vue warn]: You may have an infinite update loop in a component render function.
Apparently it's because my getDate checks the date in the vm and also updates it from the same function. I've tried watchers, computed properties but just can't figure this one out.

Answer 1

I think you should adjust your rendering so that you aren't trying to do so much logic as you are actually rendering. Rather than hand Vue a list of dates and have it figure out how to group them within the rendering, precompute the grouped dates and just have Vue render the groupings.
function contiguify(arr) {
const contiguousArr = [];
for (const d of arr) {
const lastMonthAdded = contiguousArr.length ?
contiguousArr[contiguousArr.length - 1].date :
null;
if (!lastMonthAdded || d.date !== lastMonthAdded) {
contiguousArr.push({
date: d.date,
infos: [
d.info
]
});
} else {
contiguousArr[contiguousArr.length - 1].infos.push(d.info);
}
}
return contiguousArr;
}
const app = new Vue({
el: "#app",
data() {
return {
dates: [{
date: 'January',
info: 'some other data'
},
{
date: 'March',
info: 'some other data'
},
{
date: 'January',
info: 'some other data'
},
{
date: 'February',
info: 'some other data'
},
{
date: 'February',
info: 'some other data'
},
{
date: 'March',
info: 'some other data'
},
{
date: 'March',
info: 'some other data'
},
{
date: 'February',
info: 'some other data'
},
{
date: 'March',
info: 'some other data'
},
{
date: 'March',
info: 'some other data'
}
]
};
},
computed: {
contiguousDates() {
return contiguify(this.dates);
}
}
});
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.min.js"></script>
<div id="app">
<div v-for="d in contiguousDates">
<h2>{{ d.date}}</h2>
<p v-for="i in d.infos">{{i}}</p>
</div>
</div>

Answer 2

I fixed this in the end by passing the array index into the for loop, then i used the current and previous index to compare the dates. if they were different I printed it out.