0π
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>
π€zero298
- [Vuejs]-How to write customRequest for Upload component for Ant design vue
- [Vuejs]-How to make the received data appear as HTML code?
0π
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.
π€flo
Source:stackexchange.com