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

时间:2018-07-02 20:40:55

标签: vue.js vuejs2 v-for

我想检查一个对象的特定属性是否与对象数组中下一个对象的属性相同,并通过v-for循环进行迭代。

示例JSON对象:

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

要求是检查每个连续的Date值是否相同,以便在用户界面中隐藏Date标头。

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

是否有替代方法可以完成此要求?

1 个答案:

答案 0 :(得分:2)

您的问题是,当您到达数组中的最后一项时,您的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