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的更多信息，请查看Displaying Lists

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

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

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

4 个答案: