时间戳

首页 > 解决方案 > 当索引是动态值时，如何跟踪 Vue.js 中的数组变化？

vue.js - 当索引是动态值时，如何跟踪 Vue.js 中的数组变化？

问题描述

我正在使用 Node.js 和 Vue 构建一个应用程序。我的组件数据如下：

data() {
    return {
        campaign: {
          buses: [],
          weeks: [
            {
              oneWayBuses: [],
              returnBuses: []
            }
          ]
        },
        busesMap: {
          // id is the bus ID. Value is the index in the campaign.buses array.
        },
    };
  },

从服务器获取数据后，我用两种不同的方法填充 MOUNTED 部分中的 bus 和 week 数组：

   responseForWeeks => {
      responseForWeeks.forEach(
        week => this.campaign.weeks.push(week);
      )
   }

   responseForBuses => {
      responseForBuses.forEach(
         bus => this.campaign.buses.push(bus);
         // Here I also fill the busesMap to link each week to its bus index in the array of buses
         this.busesMap[bus.id] = this.campaign.buses.length - 1;
      )
   }

所以想法是我的 busMap 看起来像 busId 键和索引值：

   busesMap = {
      'k3jbjdlkk': 0,
      'xjkxh834b': 1,
      'hkf37sndd': 2

   }

但是，当我尝试迭代数周时， v-if 不会更新，因此不会显示任何总线信息：

   <ul>
      <li 
         v-for="(busId, index) in week.oneWayBuses"
         :key="index"
         :item="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>
   </ul>

另一方面，如果我将v-if条件缩短为campaign.buses，那么我进入条件但campaign.buses[busesMap.busId]仍然未定义，所以我得到一个 ERROR 试图显示busLabel和oneWayDepartureDate

我已经深入阅读了 vue 文档，但无法提出解决方案。你能找出任何陷阱吗？

标签： vue.jsvuejs2

解决方案

尝试这个：

async mounted(){
  await responseForWeeks
  await responseForBuses
responseForWeeks => {
      responseForWeeks.forEach(
        week => this.campaign.weeks.push(week);
      )
   }
// this is partial since it is what you provided
   responseForBuses => {
      responseForBuses.forEach(
         bus => this.campaign.buses.push(bus);
         // Here I also fill the busesMap to link each week to its bus index in the array of buses
         this.busesMap[bus.id] = this.campaign.buses.length - 1;
      )
   }
   }

基本上，您要确保在组件加载之前，您的数据就位。您还可以创建计算属性，如果依赖项发生更改并且它们在 dom 中，它将强制重新渲染。

推荐阅读