CODEWITHSUNDEEP
javascriptvue.js
Xiaozhou Song
Xiaozhou Song

Reputation: 171

Calculating numbers with vue

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;
        },
    
      },
    });

Upvotes: 7

Views: 20132

Answers (3)

OArnarsson
OArnarsson

Reputation: 960

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/vue@2.5.13/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.

Upvotes: 2

Cecherz
Cecherz

Reputation: 56

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>

Upvotes: 1

samayo
samayo

Reputation: 16495

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);
}

Upvotes: 11

Related Questions