Vue.js Wie Summen berechnen?

Question

Wie kann ich die Gesamtmenge eines Arrays berechnen?

Ich übermittle Daten an die Kind-Komponente als Prop, und ich bin hier fest. Wenn ich log prop trage, gibt es ein sehr kompliziertes Objekt zurück. Ich habe versucht this.values.reduce() Funktion, aber es funktioniert nicht.

<template> 
<tr v-for="value in values" > 
     <th scope="row">{{$index+1}}</th> 
     <td>{{value.name}}</td> 
     <td>-</td> 
     <td>${{value.total}}</td> 
    </tr> 
<tr> 
    <th></th> 
    <td><strong>Total:{{total}}</strong></td> 
    <td>-</td> 
    <td>-</td> 
    </tr> 
</template> 

<script> 

export default { 



    props: ['values'], 

     ready: function() { 

    } 

} 
</script> 

Answer 1

Falls jemand in der gleichen Situation ist wie ich, dachte ich, ich würde diese Antwort hinzufügen. Ich brauchte die Werte aus verschachtelten Objekten erhalten, dann schieben Sie sie auf ein Array, bevor sie zu reduzieren:

total: function(){ 

    let total = []; 

    Object.entries(this.orders).forEach(([key, val]) => { 
     total.push(val.price) // the value of the current key. 
    }); 

    return total.reduce(function(total, num){ return total + num }, 0); 

} 

Dies verwendet ES7 .entries eine Schleife durch das Objekt, das so aussah:

orders = { 
    1: {title: 'Google Pixel', price: 3000},  
    2: {title: 'Samsung Galaxy S8', price: 2500}, 
    3: {title: 'iPhone 7', price: 5000} 
    } 

Sie können dann Anzeige der insgesamt in der Vorlage mit:

<span> {{total}} </span> 

Answer 2

Wie Sie vorgeschlagen, könnten Sie die Array#reduce-Funktion verwenden. Starting from this example on SO, können Sie es an Ihre Bedürfnisse anpassen und fügen Sie nur value.total zum summe hinzu.

die Summe aller Werte zu berechnen, Sie computed properties verwenden können, die als {{ total }} in der Vorlage angezeigt wird:

<script> 

export default { 



    props: { 
     values: { 
      type: Array, 
      default: [] 
     }, 
     } 
     ready: function() { 

    }, 
    computed: { 
     total: function() { 
      if (!this.values) { 
       return 0; 
      } 

      return this.values.reduce(function (total, value) { 
       return total + Number(value.total); 
      }, 0); 
     } 
    } 

} 
</script> 

Hinweis: Dies wird natürlich nur funktionieren, wenn value.total ist eine Zahl ohne Einheit (zB 1, nicht '1 USD'). Andernfalls müssten Sie auch die Reduzierungsfunktion entfernen.