Vue.js动态索引下数组变化追踪及业务代码问题排查

我来帮你一步步排查这个问题，主要有几个核心问题需要修正：

1. 模板中对象属性访问方式错误 #

你在模板里写的busesMap.busId是静态属性访问，它会试图找busesMap里名为busId的固定属性，而不是循环变量busId对应的动态键值。正确的做法是用方括号语法来访问动态键：

<span v-if="campaign.buses[busesMap[busId]]">
  <strong>{{ campaign.buses[busesMap[busId]].busLabel }}</strong> leaves on the
  <span>{{ campaign.buses[busesMap[busId]].oneWayDepartureDate.toDate() | formatDate }}</span>
</span>

为了让模板更简洁易读，你可以封装一个方法来获取巴士对象，避免重复的属性访问：

<li v-for="(busId, index) in week.oneWayBuses" :key="busId"> <!-- 建议用busId作为key，保证唯一性 -->
  <template v-if="getBusById(busId)">
    <strong>{{ getBusById(busId).busLabel }}</strong> leaves on the
    <span>{{ getBusById(busId).oneWayDepartureDate.toDate() | formatDate }}</span>
  </template>
</li>

然后在组件的methods中添加这个辅助方法：

methods: {
  getBusById(busId) {
    const busIndex = this.busesMap[busId];
    return this.campaign.buses[busIndex];
  }
}

2. busesMap的响应式更新问题 #

Vue 2中，直接给已初始化的空对象新增属性不会触发响应式更新（因为Vue只会在初始化时把对象的已有属性转为响应式）。你现在是直接给busesMap添加bus.id作为键，模板可能无法检测到这些新属性的变化。

解决办法有两种：

方法一：使用this.$set确保属性响应式 #

responseForBuses.forEach(bus => {
  this.campaign.buses.push(bus);
  // 用$set为对象新增响应式属性
  this.$set(this.busesMap, bus.id, this.campaign.buses.length - 1);
});

方法二：直接替换整个busesMap对象 #

如果巴士数据是一次性获取的，可以先构建完整的映射对象，再一次性赋值给busesMap，这样Vue能检测到对象的替换并触发更新：

responseForBuses.forEach(bus => this.campaign.buses.push(bus));
// 先构建完整的映射
const newBusesMap = {};
this.campaign.buses.forEach((bus, index) => {
  newBusesMap[bus.id] = index;
});
// 直接替换整个对象
this.busesMap = newBusesMap;

3. campaign.weeks初始化的冗余问题 #

你初始化campaign.weeks时默认添加了一个空的week对象{ oneWayBuses: [], returnBuses: [] }，之后又用push添加服务器返回的数据，这会导致数组里多一个无数据的空week项。如果服务器返回的是完整的weeks列表，建议直接替换数组：

// 不要用push，直接覆盖整个数组
this.campaign.weeks = responseForWeeks;

额外优化：避免异步数据的中间状态错误 #

如果巴士数据和周数据是通过两个异步请求获取的，建议等两个请求都完成后再更新数据，避免模板渲染时出现数据未准备好的undefined错误：

mounted() {
  Promise.all([
    this.fetchWeeksData(), // 你的周数据请求方法
    this.fetchBusesData()  // 你的巴士数据请求方法
  ]).then(([responseForWeeks, responseForBuses]) => {
    // 先更新weeks和buses
    this.campaign.weeks = responseForWeeks;
    this.campaign.buses = responseForBuses;
    // 再构建完整的busesMap
    const newBusesMap = {};
    this.campaign.buses.forEach((bus, index) => {
      newBusesMap[bus.id] = index;
    });
    this.busesMap = newBusesMap;
  });
}

这样就能确保所有数据都准备完毕后再渲染模板，彻底避免数据未加载完成导致的报错。

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