VueJS: How to Access the Previous Item in v-repeat

Question

I have a table that fetches some JSON from a Laravel API to populate the rows. I am using VueJS and the v-repeat:

<tbody>
  <tr v-repeat="entry: entries">
    <td>@{{ entry.id }} </td>
    <td>@{{ entry.distance }} km</td>
    <td>@{{ entry.consumption }} l</td>
    <td>@{{ getPrice(entry) + ' €'}}</td>
    <td>@{{ getCost(entry) + ' €'}}</td>
    <td>@{{ getAverageConsumption(entry) + ' l' }}</td>
    <td>@{{ getAverageCost(entry) + ' €' }}</td>
    <td>@{{ getCostPerDay(entry) + ' €' }}</td>
    <td>@{{ this.getDate(entry) }}</td>
  </tr>
</tbody>

Now I want to calculate the AverageCostPerDay(). Problem is, that I need to access the previous item in the iteration to make a comparison on how many days passed.

How do I access previous items with v-repeat in VueJS? And how could my getCostPerDay() method look like?

Answer 1

In v2 of vue.js, you need to this form of v-for to get the index:

v-for="(item, index) in items"

You can then use items[index - 1] to get the previous value (making sure your function checks it isn't undefined).