VueJS:如何在v-repeat中访问上一个项目

Question

我有一个表从Laravel API获取一些JSON来填充行.我正在使用VueJS和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>

现在我想计算AverageCostPerDay().问题是,我需要访问迭代中的上一个项目,以便比较过去的天数.

如何在VueJS中使用v-repeat访问以前的项目？我的getCostPerDay()方法怎么样？

Answer 1

在vue.js的v2中,你需要这种形式v-for来获取索引:

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

然后,您可以使用items[index - 1]以获取先前的值(确保您的函数不检查它undefined).

Answer 2

您可以像这样使用$index变量entries

        <td>@{{ getCostPerDay(entries[$index-1]) + ' €' }}</td>

有关阅读的更多信息$index,请查看显示列表