How do I sum form fields values using Vue.js?

Question

I have 5 input fields that I need to get the total of its SUM.

Created data fields and v-model to the fields and at computed: i'm trying to do the SUM

<input type="text" class="form-control" id="ValorImovelPatrimonio" name="ValorImovelPatrimonio" v-model="ValorImovelPatrimonio" required @keydown="$event.keyCode === 13 ? $event.preventDefault() : false" @blur="pegaTotal">

 var vue = new Vue({
        el: '#app',
        data: {
            checked : false,
            deposito: 1,
            patrimonio_nao: false,
            ValorImovelPatrimonio: null,
            ValorAutosPatrimonio: null,
            ValorOutrosPatrimonio: null,
            ValorAcoesPatrimonio: null,
            ValorInvestimentosPatrimonio: null,
            // total: null
        },
...

computed: {
                total: function(){
                    return this.ValorImovelPatrimonio + this.ValorAutosPatrimonio;
                }
            }

What happens:

ValorAutosPatrimonio:"15.000"
ValorImovelPatrimonio:"1.500.000"

total:"1.500.00015.000"

But I expect:

1.515.000

Anyone, please?

try explicit conversion float(this.ValorImovelPatrimonio) + float(this.ValorAutosPatrimonio) — IWHKYB
– IWHKYB, Commented Feb 18, 2019 at 18:27
Note that ValorAutosPatrimonio and ValorImovelPatrimonio are strings. You need to convert them to numbers before doing any arithmetic. — Code-Apprentice
– Code-Apprentice, Commented Feb 18, 2019 at 18:27

Boussadjra Brahim · Accepted Answer · 2019-02-18 18:27:31Z

2

Try to cast that data to numbers like :

return parseFloat(this.ValorImovelPatrimonio) + parseFloat(this.ValorAutosPatrimonio);

answered Feb 18, 2019 at 18:27

Boussadjra Brahim

90k19 gold badges163 silver badges183 bronze badges

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

4 Comments

Marcello Pato Over a year ago

Works! But the sum is wrong. It gave 16.5 and I expect 1,515.000 (millions)

Marcello Pato Over a year ago

Hummmm, the problem is the vue-the-mask. The sum was right without it

Boussadjra Brahim Over a year ago

try return parseFloat(this.ValorImovelPatrimonio.replace(/./g,'')) + parseFloat(this.ValorAutosPatrimonio.replace(/./g,''));

Marcello Pato Over a year ago

Thanks, @Boussadjra Brahim!

Collectives™ on Stack Overflow

How do I sum form fields values using Vue.js?

1 Answer 1

4 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

4 Comments

Your Answer

Sign up or log in

Post as a guest

Related