VueJS：如何访问 v-repeat 中的上一个项目答案

【问题标题】：VueJS: How to Access the Previous Item in v-repeatVueJS：如何访问 v-repeat 中的上一个项目
【发布时间】：2015-10-17 03:39:03
【问题描述】：

我有一个从 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() 方法会是什么样子？

【问题讨论】：

标签： javascript laravel vue.js

【解决方案1】：

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

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

然后您可以使用items[index - 1] 来获取先前的值（确保您的函数检查它不是undefined）。

【讨论】：

【解决方案2】：

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

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

有关$index 的更多信息，请查看Displaying Lists

【讨论】：

这仅适用于 v1，因为 $index 在 v2 中已被删除。请参阅我的 v2 答案。

【解决方案3】：

<div v-for="grade, i in grades">
    <input v-model="grade.name">
    <input v-model.number="grade.percent">
    <div v-if="i > 0 && grade.percent > grades[i - 1].percent">
        Invalid: percent must be lower than previous grade
    </div>
</div>

【讨论】：

【解决方案4】：

我通过创建一个向当前索引添加一个点的方法来解决它，如下所示：

getNextItemIndex: function(entry) {
    var currentIndex = this.entries.indexOf(entry);
    return (currentIndex + 1);
},

getNextItemDate: function(entry) {
    var nextDate = moment(this.entries[this.getNextItemIndex(entry)].date);
    return nextDate;
},

getTimeDifferenceToNextEntry: function(entry) {
    var entryDate = moment(entry.date);

    var timeDifference = entryDate.diff(this.getNextItemDate(entry), 'hours') / 24;

    return timeDifference.toFixed(3);
},

getCostPerDay: function(entry) {
    var costPerDay = this.getCost(entry) / this.getTimeDifferenceToNextEntry(entry);


    return costPerDay.toFixed(2);

    // console.log(dateDifference);

    var priceRatio = entry.price / nextPrice / 1000;

    return priceRatio.toFixed(3);
    // return previousEntry.price;
}

【讨论】：