Vue项目开发环境正常生产环境months数据未定义问题求助

核心问题原因 #

1. 模板错误使用this访问数据
   Vue模板作用域默认绑定组件实例，无需通过this访问data属性。开发环境Vue开发版会兼容这种写法，但生产环境压缩后，this指向异常会导致months被判定为undefined。

2. 数组响应式更新失效
   直接通过索引给projects数组赋值（this.projects[this.months.indexOf(month)] = []），Vue响应式系统无法检测到这类数组变化。开发环境DevTools会强制刷新视图，生产环境无此机制，导致数据更新不被追踪。

3. 异步代码写法冗余
   await与.then()混用虽功能正常，但会降低异步流程的可读性与稳定性，增加调试难度。

修复后的代码 #

模板部分（移除所有this） #

<template>
  <div class="container">
    <div class="row">
      <div class="offset-2 col-8 my-5">
        <h1>Releases</h1>
      </div>
      <div v-if="months.length > 0" id="projects" class="offset-2 col-8">
        <div v-for="(month, index) in projects" :key="index" class="mb-5">
          <h3 class="mb-5">{{ months[index] }}</h3>
          <div v-for="project in month" :key="project.id" class="project mb-3">
            <p>{{ project.name }}</p>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

脚本部分（修复响应式与异步写法） #

<script>
import moment from "moment";

export default {
  name: "List",
  data: () => {
    return {
      projects: [],
      months: [],
      range: {
        start: null,
        end: null,
      },
    };
  },
  beforeMount() {
    this.range.start = new Date();
    const date_end = new Date();
    date_end.setFullYear(date_end.getFullYear() + 3);
    this.range.end = date_end;
    this.getProjectsByRange();
  },
  methods: {
    async getProjectsByRange() {
      const formData = new FormData();
      formData.append("range", JSON.stringify(this.range));

      // 统一用await处理异步，移除冗余then
      const response = await this.axios.post("/projects/range", formData);
      const datas = response.data.projects;

      // 临时对象整理数据，避免直接操作数组索引
      const monthMap = {};
      datas.forEach((project) => {
        const month = moment(project.release_date).format("MMMM YYYY");
        if (!monthMap[month]) {
          monthMap[month] = [];
        }
        monthMap[month].push(project);
      });

      // 一次性赋值触发响应式更新
      this.months = Object.keys(monthMap);
      this.projects = Object.values(monthMap);
    },
  },
};
</script>

额外说明 #

用临时对象monthMap先整理数据，再一次性赋值给响应式数组，确保Vue能检测到数组的整体替换，触发视图更新；移除模板中的this是Vue规范写法，彻底避免生产环境作用域问题。

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