Vue中如何将当前周数据存入数组指定字段并循环展示

你的代码核心问题出在getCurrentWeek方法的循环逻辑：每次循环会向数组推入三个独立对象（分别只包含textDay、numberDay、month单个字段），最终days数组会生成21个元素（7天×3个对象），而非预期的7个包含完整字段的对象，这直接导致v-for遍历时每个元素仅能提供单个字段值，无法渲染完整日期信息。

修正后的代码 #

HTML部分（无需修改）

<div v-for="(day, index) in days" :key="index">
  <p>{{ day.month }}</p>
  <p>{{ day.numberDay }}</p>
  <p>{{ day.textDay }}</p>
</div>

JS部分

data() {
  return {
    days: []
  }
},
methods: {
  getCurrentWeek() {
    const currentDate = moment();
    const weekStart = currentDate.clone().startOf('isoWeek');
    const days = [];

    for (let i = 0; i <= 6; i++) {
      // 提前计算当前循环的日期，避免重复调用moment方法
      const currentDay = weekStart.clone().add(i, 'days');
      // 将三个字段合并为一个对象后推入数组
      days.push({
        textDay: currentDay.format("dddd"),
        numberDay: currentDay.format("Do"),
        month: currentDay.format("MMMM")
      });
    }

    this.days = days;
  }
}

关键修正说明 #

1. 合并字段到单个对象：每次循环创建包含textDay、numberDay、month三个字段的完整对象，确保数组每个元素都是结构统一的日期对象。
2. 优化moment性能：提前克隆并计算当前循环的日期（currentDay），避免重复执行moment(weekStart).add(i, 'days')这类冗余操作。
3. v-for的key优化：可以用循环的index作为key，也可以用currentDay.format('YYYYMMDD')生成唯一日期字符串作为key，后者在数据更新时的渲染效率更高。

内容的提问来源于stack exchange，提问作者Philippe