I calculate value with Comma with Vue.JS

Question

Good afternoon, Vue.JS can calculate directly in mustache {{}} but when a value comes with comma, Nan appears the result that is, if the variable is value = 2 and I do {{ value - 1 }} it displays 1 of good but if I do value = 2.5 and then {{ value - 1 }} it displays Nan

<p>{{ valor - 2 }}</p>

how could I calculate this comma value in mustaches?

Answer 1

Change the comma by a dot:

<p>{{ valor.replace(',', '.') - 2 }}</p>

I recommend to create a computed property of Vue and replace there, not to dirty your view.

Another thing, this will work for subtraction, multiplication and division, but addition will be treated as concatenation of strings, as per commented up by Denis Rudnei de Souza. To add up, you still need to convert in number:

+valor.replace(',', '.')

or

parseFloat(valor.replace(',', '.'))

Answer 2

Like the bfavaretto already mentioned you can swap the comma by dot for JS to do the automatic conversion to Number when subtraction is made.

But you could have a function to convert this string to Float and another function to format the Float to String. Then just use functions to work with your data. There as you apply in your code you choose!

In the code below I put examples with Filters, Computed Properties and Methods.

let toFloat = str => parseFloat(str.replace(',', '.'));
let toStr = float => ("" + float).replace('.', ',');


const app = new Vue({
  el: '#app',
  data: {
    valor: "2,5",
  },
  filters: {
    sub2(value) {
      let number = toFloat(value) - 2;
      return toStr(number);
    },
  },
  computed: {
      valor_sub2() {
        let number = toFloat(this.valor) - 2;
        return toStr(number);
      },
  },
  methods: {
    method_sub2(value) {
      let number = toFloat(value) - 2;
      return toStr(number);
    }
  }
});

<script src="https://vuejs.org/js/vue.min.js"></script>

<div id="app">
  <input v-model="valor">
  <div>Filter: {{ valor }} - 2 = {{ valor | sub2 }}</div>
  <div>Computed: {{ valor }} - 2 = {{ valor_sub2 }}</div>
  <div>Method: {{ valor }} - 2 = {{ method_sub2(valor) }}</div>
</div>

---

I didn’t get into the merits of number internationalization because it wasn’t part of your problem, but this technique of using String.replace() only serves for very restricted inputs. If you want the user to enter a number and your software to recognize it is necessary to work better the Parsing of these strings. In my example would be the methods toFloat() and toStr(). (Reading tip: Intl.NumberFormat)