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

【问题标题】：How to keep track of an array change in Vue.js when the index is a dynamic value?当索引是动态值时，如何跟踪 Vue.js 中的数组变化？
【发布时间】：2020-04-02 14:11:30
【问题描述】：

我正在使用 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] 仍然未定义，所以我在尝试显示busLabel 和oneWayDepartureDate 时遇到错误

我在depth documentation 中阅读了 vue，但无法提出解决方案。你能找到什么陷阱？

【问题讨论】：

不应该是v-for="(busId, index) in campaigns.weeks.oneWayBuses"吗？
好点，但我在上面的campaign.weeks 中有另一个v-for="(week, index)"。这就是为什么在下一次迭代中我只在 week.oneWayBuses 中使用 v-for="(busId, index) 。
没有看到任何 week 很难说
Week 有很多键，但我相信这里唯一重要的是 oneWayBuses[] 和 returnBuses[]。将尝试在描述中添加更多信息。

标签： vue.js vuejs2

【解决方案1】：

试试这个：

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 中，它将强制重新渲染。

【讨论】：

我已经在代码中添加了这些功能。当我签入 VueDevtools 时，campaign.buses、campaign.weeks 和 busesMap 的值都符合预期。所以对我来说，HTML v-for/v-ifformulas 似乎存在问题。无论如何，谢谢迈克尔！

【解决方案2】：

实际上，问题确实出在 HTML 中。尝试访问对象键时，最好使用[] 而不是点.

最终的 HTML 结果如下：

<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>

发生的事情是以前的campaign.buses[busesMap.busId] 不存在，因此没有渲染任何东西。已解决至campaign.buses[busesMap[busId]]。还使用 claudators 显示胡须 sintach。

希望它可以帮助其他人弄乱对象！

【讨论】：