Home » vue » How do I get summation of false or true value in Vue.js

How do I get summation of false or true value in Vue.js

Posted by: admin November 26, 2021 Leave a comment

Questions:

I get the total value of amount from this array but I want summation of only paid: false or paid: true values.

var app = new Vue({
    el: "#root",
    data: {
      payments: [
        { name: "Rent", amount: 10000, paid: true },
        { name: "Gas Bill", amount: 900, paid: true },
        { name: "Water Bill", amount: 200, paid: false },
        { name: "Net Bill", amount: 900, paid: false }
      ]
    },
    computed: {
        totalAmount: function() {
            var sum = 0;
            for (var i = 0; i < this.payments.length; i++) {
            sum += this.payments[i].amount;
            }
            return sum;
        },

    }
  });
Answers:

Would this work?

computed: {

totalAmount: function() {
    var sum = 0;
    for (var i = 0; i < this.payments.length; i++) {
        sum += this.payments[i].amount;
    }
    return sum;
},
totalPaidTrueAmount: function() {
    var sum = 0;
    for (var i = 0; i < this.payments.length; i++) {
        if (this.payments[i].paid) {
            sum += this.payments[i].amount;
        }
    }
    return sum;
},
totalPaidFalseAmount: function() {
    var sum = 0;
    for (var i = 0; i < this.payments.length; i++) {
        if (!this.payments[i].paid) {
            sum += this.payments[i].amount;
        }
    }
    return sum;
},

}

###

You could just filter your arrays on the value you want to count and take the length:

var app = new Vue({
    el: "#root",
    data: {
      payments: [
        { name: "Rent", amount: 10000, paid: true },
        { name: "Gas Bill", amount: 900, paid: true },
        { name: "Water Bill", amount: 200, paid: false },
        { name: "Net Bill", amount: 900, paid: false },
        ,
        { name: "Cable Bill", amount: 900, paid: true }
      ]
    },
    computed: {
      totalAmmount(){
        return this.payments.reduce((total, p) => total + p.amount, 0)
      },
      numberPaid(){
        return this.payments.filter(p => p.paid).length
      },
      numberNotPaid(){
        return this.payments.filter(p => !p.paid).length
      }

    }
  });
<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.17/vue.js"></script>

<div id="root">
    <p>Total: {{totalAmmount}}</p>
    <p>Paid: {{numberPaid}}</p>
    <p>Not Paid: {{numberNotPaid}}</p>
</div>

###

Perhaps this is more vue-like?

var app = new Vue({
  el: "#root",
  data: {
    payments: [
      { name: "Rent", amount: 10000, paid: true },
      { name: "Gas Bill", amount: 900, paid: true },
      { name: "Water Bill", amount: 200, paid: false },
      { name: "Net Bill", amount: 900, paid: false }
    ] 
  },
  computed: {
    total: function() { 
      let sums = { total: 0, paid: 0, unpaid: 0 }
      this.payments.forEach(payment => {
        sums.total  += payment.amount;
        sums.paid   += payment.paid ? payment.amount : 0;
        sums.unpaid += payment.paid ? 0 : payment.amount;
      });
      return Object.entries(sums).map((ent) => `${ent.join(":")}`).join("\n");
    }  
  }
})
.pre {
  white-space: pre-wrap; 
  word-wrap: break-word;
  font-family: inherit;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.17/vue.js"></script>
<div id="root" class="pre">{{total}}</div>