How to ADD numbers in vueJS

Question

If I change the symbols at {{ num1+num2+num3 }} with symbols for multiplication (*) or substraction (-) it works well. However, when trying to add by using the (+) it simply concatenates.

    <div id="vue_mult">
    <input type="number" v-model="num1"  min="78" max="98" /> + 
    <input type="number" v-model="num2"  min="78" max="98" /> + 
    <input type="number" v-model="num3"  min="78" max="98" /> =
    {{ num1+num2+num3 }}
</div>
    <script>
    const app = new Vue({
        el:'#vue_mult',
        data: {  
            num1:0,
            num2:0,
            num3:0
        } //end data property 
    }) //end Vue object
</script>
</body>
</html>

Potato Salad · Accepted Answer · 2018-12-12 05:07:39Z

5

It's because the value of each input are automatically strings (hell, everything is a string in HTML/HTTP), therefore being concatenated by default. I would do the summation on a method (or a computed property) and convert the values to integers during the operation. This also separates some concerns -- making your template arguably cleaner.

    const app = new Vue({
        el:'#vue_mult',
        data: {  
            num1:80,
            num2:80,
            num3:80
        },
        methods: {
            sum: function(nums){
                let result = 0;
                nums.forEach(function(n){ result += n * 1; });
                return result
            }
        }
//end data property 
    }) //end Vue object

<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.17/vue.min.js"></script>

    <div id="vue_mult">
    <input type="number" v-model="num1"  min="78" max="98" /> + 
    <input type="number" v-model="num2"  min="78" max="98" /> + 
    <input type="number" v-model="num3"  min="78" max="98" /> =
    {{ sum([num1, num2, num3]) }}
</div>

</body>
</html>

edited Dec 12, 2018 at 5:07

answered Dec 12, 2018 at 4:49

Potato Salad

4,6603 gold badges22 silver badges33 bronze badges

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

2 Comments

CertainPerformance Over a year ago

reduce is probably more appropriate and more terse than forEach if you're trying to combine all values of an array into a single value. sum: nums => nums.reduce((a, b) => a + b, 0), and you can remove the 0 if there's always going to be at least one element in nums

Potato Salad Over a year ago

@CertainPerformance .reduce() is one of them Array methods that I haven't the time to explore yet so this is good info.

Code Maniac · Accepted Answer · 2018-12-12 05:06:27Z

4

You simply need to parse the string into number and than you're good to go.

Basically when you try to use + operator on string it does the concatenation not the addition.So to do mathematical operation you need to parse the string into numbers. something like this:-

 {{ Number(num1) + Number(num2) + Number(num3) }}

Why it does work with the other symbols.

When you call other any other operator except addition it internally changes it number using toNumber function. so they work same as any normal number will.

let sub = `1`-`1`;
let mul = `1` * `2`;
let div = `1` / `1`;

console.log(sub);
console.log(mul)
console.log(div)

edited Dec 12, 2018 at 5:06

answered Dec 12, 2018 at 4:51

Code Maniac

37.9k5 gold badges44 silver badges65 bronze badges

Comments

akuiper · Accepted Answer · 2018-12-12 04:48:20Z

3

num1, num2 and num3 are strings, convert them to numeric first before adding:

{{ Number(num1) + Number(num2) + Number(num3) }}

answered Dec 12, 2018 at 4:48

akuiper

216k33 gold badges362 silver badges379 bronze badges

Comments

tony19 · Accepted Answer · 2022-07-16 05:38:23Z

0

There is a .number modifier for v-model directive which you can use in this kind of situations.

Here is an example:

https://codepen.io/bengu/pen/GRNXNbe

edited Jul 16, 2022 at 5:38

tony19

140k23 gold badges281 silver badges354 bronze badges

answered Mar 5, 2021 at 16:22

bengü thon mai mochi

112 bronze badges

1 Comment

Code-Apprentice Over a year ago

Will you show an example of how this is used?

Collectives™ on Stack Overflow

How to ADD numbers in vueJS

4 Answers 4

2 Comments

Comments

Comments

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

4 Answers 4

2 Comments

Comments

Comments

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related