VueJS Summe Pivot-Tabelle

Question

Ich lerne VueJS und bin dabei, eine sehr einfache App zu portieren, die ich in Laravel mit Blade als Vorlage-Engine geschrieben habe.

Ich behalte das vorhandene Backend, das aus einer einfachen erholsamen API von 3 Tabellen besteht: Bücher, Orte und ein Pivot Books_Places.

Die json sieht wie folgt aus etwas:

books: 
{ 
    "id": 1, 
    "title": "foo bar", 
    "places": [ 
    { 
     "id": 1, 
     "name": "library 1", 
     "pivot": { 
     "book_id": "1", 
     "place_id": "1", 
     "quantity": "50", 
     "id": 1 
     } 
    }, 
    { 
     "id": 2, 
     "name": "library 2", 
     "pivot": { 
     "book_id": "1", 
     "place_id": "2", 
     "quantity": "75", 
     "id": 2 
     } 
    } 
    ] 
} 

In Klinge hatte ich die folgende Zeile ein „für Buch in Bücher“ gebaut in Zyklus, den ich wegen seiner Einfachheit geliebt:

{{ $book->places->sum('pivot.quantity') }} 

Ich versuche, dasselbe in VueJS zu erreichen, aber ich bin mir nicht sicher, was die einfachste Herangehensweise ist. Ich würde Ihre Meinung schätzen.

Danke!

Answer 1

Sie könnten eine Methode erstellen, um die Mengen mit Array#reduce zusammenzufassen:

methods: { 
    sumOfQuantities: function(book) { 
     return book.places.reduce(function(sum, next) { 
      return sum + Number(next.pivot.quantity); 
     }, 0); 
    } 
} 

Hinweis: Da Ihr quantity ein String ist, müssen Sie ihn in eine Zahl konvertieren (z Number() verwenden).

Sie können es dann in der Vorlage zum Beispiel mit v-text zuzugreifen:

<div v-for="book in books"> 
    <div v-text="sumOfQuantities(book)"></div> 
</div>