如何使用 Vue3 编辑 v-for 循环中的每个单独的数组元素？

Question

基本上我有这个日历行，每个元素都有日期信息：

我正在尝试停止单个数据的循环，以便每个日历项都有自己的关于当前和未来几天的数据。

第一个日历元素应始终显示当前日期，其余项目为剩余天数

模板

<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>

脚本

 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')
}

我相信有一种方法可以以某种方式访问​​每个日历元素并为其提供自己的数据，但我不知道如何

Answer 1

我已经使用moment 功能更改了您的代码，它在this 链接中正确显示。

如您所见，我使用 moment().add(<countingOfDiffrenceFromToday>, 'day') 来准确到达日期并将其推送到数组并在 v-for 循环中使用。