calculate 2d array with reduce in vuejs - vue.js

Question

In Vue, I'm inserting a value in a 2d array input field and calculating it per row, but the total value that is being returned only calculates the first row, and when I display, the computed value is all the same.
How can i calculate the inputted value so that the value will compute it per row and not just the first value?
This is what i get:
sample image of the value
FIDDLE:jsfiddle
NAME | VALUE1 | VALUE2 | TOTAL
name1 | 1 | 1 | 2
name2 | 2 | 3 | 2
name3 | | | 2
script
data() {
return {
form: new Form({
labStudentScores: [],
})
};
},
computed: {
studentTotalScore: function() {
return this.form.labStudentScores.reduce(
(acc, item) => acc + parseInt(item.value),
0
);
},
methods: {
addScore: function() {
this.form.labStudentScores.push({ value: [] });
}
}
Template
<button type="button" #click="addScore">score(+)</button>
//classlists is comming from http request
<tr v-for="(classlist,index) in classlists" :key="'lab'+ classlist.id">
<td>{{index +1}}</td>
<td>
{{classlist.student}}
</td>
<td v-for="(labStudentScore,i) in form.labStudentScores" :key="i">
<input v-model="labStudentScore.value[index]" />
</td>
<td>{{studentTotalScore}}</td>
</tr>

Answer 1

Your computed variable is really only one number studentTotalScore. Since you want a number for each row, this computed value should be an array studentTotalScores. Each row should have its own index.
this.form.labStudentScores[index].push(value);
And in your template you should also refer to the correct row too for calulation.
{{studentTotalScore[index]}}
Of course your compute function should also only compute values of the related row.