在循环中访问下一个索引 object 的值 - Vue JS

Question

我想检查 object 的特定属性是否与 [=24] 的下一个 object 的属性相同=], 通过 v-for 循环迭代。

示例 JSON object:

[
  { Date: '21-July-2017', ...},
  { Date: '21-July-2017', ...},
  { Date: '25-July-2017', ...},
  ...
]

要求检查每个连续的Date值是否相同，所以我们将Date header隐藏在UI.

<div v-for="(everyDay, dayIndex) in eachPost.values" v-bind:key="dayIndex">
  <div v-if="everyDay['Date'] !== eachPost.values[dayIndex+1].Date">
     THIS DOESN'T WORK
  </div>
</div>

是否有其他方法可以完成此要求？

Answer 1

您的问题是当您到达数组中的最后一项时，您的 dayIndex+1 对象不存在。是undefined。您需要做的是在您的模板中确定您的对象是否已定义并从那里开始。

  <div v-for="(everyDay, dayIndex) in eachPost.values" v-bind:key="dayIndex">
   <template v-if="eachPost.values[dayIndex+1]">
      <div v-if="everyDay['Date'] !== eachPost.values[dayIndex+1].Date">
         THIS WORKS
      </div>
  </template>

 </div>

这是我的工作示例jsFiddle

在循环中访问下一个索引 object 的值 - Vue JS

Access next index object's value within a loop - Vue JS

vue.js

vuejs2

v-for