Question

如何计算阵列中的总量？

我将数据传递给子组件作为prop，我被困在这里。当我控制日志道具时，它返回一个非常复杂的对象。我尝试了this.values.reduce()功能，但它不起作用。

<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

如果其他人和我的情况相同，我想我会添加这个答案。我需要从嵌套对象中获取值，然后在减少它们之前将它们推送到数组：

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);

}

这使用ES7 .entries循环遍历如下所示的对象：

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

然后，您可以在模板中显示总计：

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

Answer 2

如您所建议，您可以使用Array#reduce功能。 Starting from this example on SO，您可以根据自己的需要进行调整，只需将value.total添加到总计中。

要计算所有值的总和，您可以使用computed properties，它会在模板中显示为{{ total }}：

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

注意：如果value.total是无单位数字（例如1，而不是'1 USD'），那么这当然有效。否则你也需要去掉reduce函数。

Answer 3

var payments = new Vue({
            el: "#payments",
            data: {
                payments: [
                    { name: "houseRent", amount: 1000, is_paid: true },
                    { name: "houseRent", amount: 1500, is_paid: true },
                    { name: "houseRent", amount: 1200, is_paid: false },
                    { name: "houseRent", amount: 1070, is_paid: true },
                    { name: "houseRent", amount: 1040, is_paid: false }
                ]
            },
            computed: {
                totalAmount: function () {
                    var sum = 0;
                    this.payments.forEach(e => {
                        sum += e.amount;
                    });
                    return sum
                }
            }
        });`

Vue.js如何计算总数？

3 个答案: