Básicamente tengo esta fila de calendario con información de fecha en cada elemento:

Estoy tratando de detener ese ciclo de datos únicos para que cada elemento del calendario tenga sus propios datos sobre el día actual y los próximos.

El primer elemento del calendario siempre debe mostrar el día actual, el resto de los elementos son los días restantes

Modelo

 <template> <div class="wrapper"> <div class="calendar-wrapper"> <div class="calendar-row" v-for="(day, idx) in dayArr" :key="idx" > <div id="card" class="day-card unactive" @click="test(idx)" > <div class="card-info"> <p class="name">{{ dayOfWeek }}</p> <p class="day"> {{ currDay }} </p> </div> <div class="dot-wrapper"> <div class="dot-status undone" /> <div class="dot-status undone" /> </div> </div> </div> </div> </div> </template>

Guion

 setup() { const moment = require('moment') const m = moment // Get the remaining month days starting from today: const daysRemainingThisMonth = moment().endOf('month').diff(moment(), 'days'); // Turn the remaining days into an array for future rendering in the Template let dayArr = Array(daysRemainingThisMonth) // Get the index of a clicked calendar item: const test = (idx) => { console.log(idx + 1); } // Get the current day: const currDay = m().format('D') // Get the current week day: const dayOfWeek = m().format('dddd') }

Creo que hay una manera de acceder de alguna manera a cada elemento del calendario y darle sus propios datos, pero no tengo idea de cómo