CODEWITHSUNDEEP
vue.js
Jubayer Ahmed
Jubayer Ahmed

Reputation: 81

How to calculate array of numbers in vuejs

I have array. in that array there is a field name debit. I want to add all the debit on this array and find the total. I am trying to do this with reduce function. but it's adding number as character not calculating the sum of the array number. here is the code 

export default {
    data() {
        return {
            fields: {
                debit: 0,
                credit: 0,
                type: '',
            },
            fields: [],
            allDebit: 0,
            allCredit: 0,
        }
    },
    methods: {
        newfield() {
            this.fields.push({
                debit: 0,
                credit: 0,
                type: '',
            })


        },
        dataRemove(index) {
            Vue.delete(this.fields, index);
        },
        calculate() {
            this.allDebit = this.fields.reduce((acc, item) => acc + item.debit, 0);


        }

    }
}

output:

{
  "fields": [
    {
      "debit": "4",
      "credit": "2",
      "type": ""
    },
    {
      "debit": "4",
      "credit": "2",
      "type": ""
    }
  ],
  "allDebit": "044",
  "allCredit": 0
}

Upvotes: 1

Views: 805

Answers (5)

krismeister1993
krismeister1993

Reputation: 61

I would do this in a computed property instead, so that the value is calculated again if fields changes.

computed: {
   allDebit() {
     return this.fields.reduce((acc, item) => acc + parseInt(item.debit), 0);
   }
}

EDIT: You can't have two properties with the same key in your data function. You have fields two times.

Upvotes: 0

kengres
kengres

Reputation: 430

export default {
  data() {
    return {
      fields: { // this is identical to the fields: [] array
        // you need to rename it to something like field (Singular)
        debit: 0,
        credit: 0,
        type: '',
      },
      // maybe you ment
      field: { // field (Singular)
        debit: 0,
        credit: 0,
        type: '',
      },
      // 
      fields: [], // THIS !!!
      allDebit: 0,
      allCredit: 0,
    }
  },
  methods: {
    newfield() {
      this.fields.push({
        debit: 0,
        credit: 0,
        type: '',
      })


    },
    calculate() {
      const { debit } = this.fields.reduce((acc, item) => {
        return { debit: acc.debit + item.debit };
      }, { debit: 0 })
      this.allDebit = debit;
    }

  }
}

You can't have 2 identical keys in the data function property.

Upvotes: 0

Andriy Kuba
Andriy Kuba

Reputation: 8263

  1. Rename first fields to field, or remove it completely, I do not see where do you use it.
  2. Parse to integer item.debit either in the accumulator or in the place where do you set it.

The possible fix:

export default {
    data() {
        return {
            field: {
                debit: 0,
                credit: 0,
                type: '',
            },
            fields: [],
            allDebit: 0,
            allCredit: 0,
        }
    },
    methods: {
        newfield() {
            this.fields.push({
                debit: 0,
                credit: 0,
                type: '',
            })


        },
        dataRemove(index) {
            Vue.delete(this.fields, index);
        },
        calculate() {
            this.allDebit = this.fields.reduce((acc, item) => acc + parseInt(item.debit), 0);


        }

    }
}

Upvotes: 0

沈鑫Real
沈鑫Real

Reputation: 1

convert string to number and then sum them

 calculate() {
            this.allDebit = this.fields.reduce((acc, item) => Number(acc) + Number(item.debit), 0);


        }

Upvotes: 0

entio
entio

Reputation: 4283

 fields: {
                debit: 0,
                credit: 0,
                type: '',
 },
 fields: [],

You specify object fields and array in the data. You cannot have an object with two identical keys in the object literal. That is not a valid JS. I wouldn't be surprised if that was the reason.

Also, your values in output seem to all be strings. Try parseInt function in the reduce function.

Upvotes: 1

Related Questions