How to calculate array of numbers in vuejs - vue.js

Question

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
}

Answer 1

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.

Answer 2

convert string to number and then sum them
calculate() {
this.allDebit = this.fields.reduce((acc, item) => Number(acc) + Number(item.debit), 0);
}

Answer 3

Rename first fields to field, or remove it completely, I do not see where do you use it.
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);
}
}
}

Answer 4

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.

Answer 5

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.