Calculating numbers with vue

Question

I am really new to vueJS.

I try to get two input value, adding them together, and show the result. I found it is really wired, because when number1 minus number3, or number1 multiplied number2, or number1 divided number2, the calculating is all working fine. However when number1 plus number2, it doesn’t working, and seems add two str together (for example: 1 + 2 = 12).

What’s going on here? And how can I get result with number1 + number2

Please help

<div id="app">

        <input type="number" name="number1" v-on:input= "update_number1">
        <p>{{ number1 }}</p>
        <input type="number" name="number2" v-on:input= "update_number2">
        <p>{{ number2 }}</p>

        <hr>
        <p>{{ result() }}</p>

</div>

new Vue({
  el: '#app',
  data: {
    number1: 0,
    number2: 0,
  },
  methods: {
    update_number1: function (event) {
      this.number1 = event.target.value;
    },
    update_number2: function (event) {
      this.number2 = event.target.value;
    },
    result: function () {

      return this.number1 + this.number2;
    },

  },
});

Solution 1

This is more likely a javascript problem than a vue one.

If you want to add two numbers, you can use parseInt() function as:

result: function () {
  return parseInt(this.number1) + parseInt(this.number2);
}

Solution 2

Take a look at the updated fiddle below:

new Vue({
  el: '#app',
  data: {
    number1: 0,
    number2: 0,
  },
  computed: {
  	result() {
    	return parseInt(this.number1) + parseInt(this.number2);
    }
  }
});

<script src="https://unpkg.com/[email protected]/dist/vue.js"></script>
<div id="app">
			<input type="number" name="number1" v-model="number1">
			<p>{{ number1 }}</p>
			<input type="number" name="number2" v-model="number2">
			<p>{{ number2 }}</p>
			<hr>
			<p>{{ result }}</p>
</div>

What did we change?:

• We bound number1 and number2 to the inputs using v-model, that way they are reactive to changes in the input fields.
• We changed result to a computed property.
• We parsed number1 and number2 to Integers to that they always return number values.
• We removed the () from the template so that results() became result.

Please let me know if you have any questions or don't understand.

Solution 3

This code works :)

new Vue({
    el: '#app',
    data:{
        firstNum: 0,
        secondNum: 0,
    },
})

<div id="app">
  First Number
  <input type="text" v-on:input="firstNum = parseFloat($event.target.value)"/>
  Second Number
  <input type="text" v-on:input="secondNum = parseFloat($event.target.value)"/>

  Result 
  <h1><span style="color: red">{{firstNum + secondNum}}</span></h1>
  <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
  <script src="main.js"></script>
<div>

Comments

[Xiaozhou Song]

But I didn't understand why - / * is working, but not + ?

[samayo]

Because the + can also be used to concatenate strings, so by default it assumes you want to concatenate strings when you do '1' + 1 but for multiplication it only has 1 use, so js knows you want to multiply

[Xiaozhou Song]

HA..I see.. Thanks a lot

[Shemang David]

Thanks Chief, you saved the day. I did parseInt(this.number1 + this.Number2)