VueJS: Как получить доступ к предыдущему элементу в v-repeat

Question

У меня есть таблица, которая извлекает некоторые JSON из API Laravel для заполнения строк. Я использую VueJS и v-повтор:

<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(). Проблема в том, что мне нужно получить доступ к предыдущему элементу на итерации, чтобы провести сравнение того, сколько дней прошло.

Как получить доступ к предыдущим элементам с помощью v-repeat в VueJS? И как может выглядеть мой метод 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

в v2 из vue.js, вам нужно к этой форме v-for, чтобы получить индекс:

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

Вы можете использовать items[index - 1], чтобы получить предыдущее значение (убедитесь, что ваша функция проверяет не undefined).