Vue computed properties, issues with addition vs concatenation

Question

Just learning Vue and I stumbled upon an interesting behavior, I'd like to know why this happens and how to avoid it.

<template>
  <div>
    <input type="number" v-model="a" style="color: white" />
    <input type="number" v-model="b" style="color: white" />
    <p style="color: white">{{ c }}</p>
  </div>
</template>

<script>
export default {
  data() {
    return {
      a: 1,
      b: 2
    };
  },
  computed: {
    c: function() {
      return this.a + this.b;
    }
  }
};
</script>

On first render, 'c' is displayed as '3', which is what I would expect. If I change one of the inputs, however, the two numbers are concatenated. For example if I changed 'a' to '11', my expected value would be 13, but I'm getting '112'. Why does this happen?

Answer 1

Just use Number object constructor in order to make the sum:

  computed: {
    c: function() {
      return Number(this.a) + Number(this.b);
    }
  }

the two operands are considered as strings which will be concatenated when you try to put + between them, in order to avoid that default behavior try to use Number constructor or parseInt , parseFloat function to change the behavior to sum operation.

or try to use number modifier in v-model directive like:

<input type="number" v-model.number="b" style="color: white" />