How can I sum a input values created dynamically with Vuejs

Question

I have a list that I created like this:

<tbody>
  <tr v-for="(post, index) in posts" v-bind:index="index">
    <td>{{ post.rut }}</td>
    <td>{{ post.names }} {{ post.father_lastname }} {{ post.mother_lastname }}</td>
    <td>
       <input type="text" @blur="handleBlur(post.amount)" class="form-control" id="exampleInputEmail1" v-model="post.amount" placeholder="Ingresa el monto">
    </td>
  </tr>
</tbody>

I have a method like this one in Vuejs:

handleBlur(value) {
  this.total_inputs = parseInt(this.total_inputs) + parseInt(value);
},

The thing is that if I edit any input it adds correctly I mean:

If it was 0.. and I add a value 3 in the input it will say 3+0 = 3 etc...

The thing is that I just do not need to add because If I edit same input that it has 3 and I change to 4 it should say total = 4 but it says 3+4 = 7 and it's wrong because the 4 replaced the 3 number so I wonder how can I fix my code to do that?

Thanks

I'm confused - what is the desired behavior of the input when a user makes a change? — Brendan Bond
– Brendan Bond, Commented Dec 13, 2021 at 18:56
Why not just iterate through the posts array? You're already setting the value (post.amount) in the array so you can simply refer to this: this.total_inputs = this.posts.reduce((i, post) => i + post.amount, 0); — h2ooooooo
– h2ooooooo, Commented Dec 13, 2021 at 18:57
@h2ooooooo that is the answer!! if you add it I will accept it and TY!! — Jis
– Jis, Commented Dec 13, 2021 at 19:04

h2ooooooo · Accepted Answer · 2021-12-14 18:06:40Z

You're getting this issue because handleBlur is being called every time any of the fields is being blurred. This means that when you blur the same field you're still adding the number, despite this number no longer existing.

In your code:

<input type="text" @blur="handleBlur(post.amount)" class="form-control" id="exampleInputEmail1" v-model="post.amount" placeholder="Ingresa el monto">

You already define the model (v-model="post.amount") which means that Vue is changing this automatically in the post object as you're modifying the field.

This also means that you don't have to pass post.amount to the blur function, but can simply call handleBlur:

<input type="text" @blur="handleBlur" class="form-control" id="exampleInputEmail1" v-model="post.amount" placeholder="Ingresa el monto">

Then in your handleBlur method, you can simply iterate through your post array and sum up the different post.amount values:

handleBlur() {
    let totalAmount = 0;
    
    for (let i = 0, len = this.posts.length; i < len; i++) {
        const post = this.posts;
        
        totalAmount += post.amount;
    }
    
    this.total_inputs = totalAmount;
}

A shorter way of writing this is to simply use Array.reduce() like so:

handleBlur() {
    this.total_inputs = this.posts.reduce((totalAmount, post) => totalAmount + post.amount, 0);
}

Both of these pieces of code are doing the exact same thing.

Collectives™ on Stack Overflow

How can I sum a input values created dynamically with Vuejs

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related