如何使用 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 link 中正确显示。

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

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

How do I edit each individual array element in v-for loop with Vue3?

javascript

arrays

momentjs

vue.js

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

模板

脚本