How to sum values inside v-for statement (vuejs)

Question

Here is my code below

<td v-for="config in configs" v-if="config">
    <input type="number" v-model="config.score" v-on:keyup="computeTestScores(allocation, $event)">
 </td>
<td><span class="subtotal"></span></td>`

how do i compute the subtotal? Secondly, if the values of any input changes, i want to be able update the total class;

Lassi Uosukainen · Accepted Answer · 2018-04-13 06:53:39Z

2

You should not try to compute the sum with v-for. V-for is meant for presentation.

Instead add a computed value that calculates the subtotal. Inside the computed you should loop through the array, calculate the sum and return it. The computed property also calculates the new value automatically if any of the inputs change.

answered Apr 13, 2018 at 6:53

Lassi Uosukainen

1,68815 silver badges22 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

Famurewa Taiwo Over a year ago

now the problem is that my v-for loop for configs is inside another v-for loop called allocations. can you do me a quick short code? thanks

Rodris · Accepted Answer · 2018-04-13 15:27:59Z

0

You may sum the values of your array with the reduce function. The total will update automatically if any score changes.

<td><span class="subtotal">{{ configs.reduce((a, c) => a + parseInt(c.score), 0) }}</span></td>

answered Apr 13, 2018 at 15:27

Rodris

2,8882 gold badges19 silver badges26 bronze badges

Collectives™ on Stack Overflow

How to sum values inside v-for statement (vuejs)

2 Answers 2

1 Comment

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

1 Comment

Comments

Your Answer

Sign up or log in

Post as a guest

Related