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

Question

我有一个 table 从 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

您可以像这样将 $index 变量与 entries 一起使用

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

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

Answer 2

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

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

Answer 3

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

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

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

Answer 4

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

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

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

javascript

laravel

vue.js