sum inside the loop vue js

Solutions on MaxInterview for sum inside the loop vue js by the best coders in the world

showing results for - "sum inside the loop vue js"
Alessia
05 Nov 2016
1########### HTML ############
2<div id="app">
3  <div v-for="report in reports">
4    <h2>{{ report.year }}</h2>
5    <table class="table table-striped">
6      <thead>
7        <tr>
8          <th>Month</th>
9          <th>Number of orders</th>
10          <th>Total revenue</th>
11          <th>Average order</th>
12        </tr>
13      </thead>
14      <tbody>
15        <tr v-for="value in report.values">
16          <td>{{ value.month }} {{ value.year }}</td>
17          <td>{{ value.orders }}</td>
18          <td>£{{ value.revenue }}</td>
19          <td>£{{ value.average }}</td>
20        </tr>
21      </tbody>
22      <tfoot v-if="reports">
23        <tr>
24          <td>Total {{report.year }}</td>
25          <td>{{ totalOrders(report.values) }}</td>
26          <td>£{{ totalRevenue(report.values) }}</td>
27          <td></td>
28        </tr>
29      </tfoot>
30    </table>
31  </div>
32</div>
33
34########### JS #############
35const app = new Vue({
36  el: '#app',
37  data: {
38    reports: []
39  },
40  created() {
41    fetch('https://api.myjson.com/bins/16731e')
42      .then(response => response.json())
43      .then(json => {
44      this.reports = json.reports
45    });
46  },
47  methods: {
48    totalOrders: function (values) {
49      return values.reduce((acc, val) => {
50        return acc + parseInt(val.orders);
51      }, 0);    
52    },
53    totalRevenue: function (values) {
54      return values.reduce((acc, val) => {
55        return acc + parseInt(val.revenue);
56      }, 0);
57    }
58  }
59});
60
61Working fiddle: https://jsfiddle.net/4js8L3p9/.