I calculate value with Comma with Vue.JS

Asked

Viewed 706 times

1

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?

  • Is it just the comma you really need to treat? What kind of values do you want to accept in these fields? Vale 1.500, R$ 1.500,00, 1,6% etc.?

  • You could use the raw value for calculation and a filter for display, so you wouldn’t have to treat the comma

  • @bfavaretto yes, the comma, is very basic, the variable gets 4.5 and need to show 3.5 actually

  • @Denisrudneidesouza is that the gross value is 4.5

  • You could use the function replace, ex: number.replace(',', '.'), but will return a String, which can cause strange behaviors

  • If valor is a string it makes no sense to make calculations with the variable in mustaches. It will only obscure your code and/or generate gambiarras. The variable valor should be the float, who will make this conversion depends on you, but the mustaches does not roll...

  • @fernandosavio is an information at the top of the page that I want to repeat in several places but in 1 place it needs to subtract a certain value, I know it is obscure and bizarre, is that I do not dominate, I am studying and I came across this gap

  • Then at that particular place you can do the conversion, calculate and then convert back to string. You can do this at methods() if you want.

  • @fernandosavio then I would go there where is the method() or create one that receives the Comma, switch to Point and Return with Comma, would be this?

  • 1

    I’ll post an example, could be with method with filter, go of yourself

  • @fernandosavio very Valew friend

Show 6 more comments

2 answers

5

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(',', '.'))
  • really, it really works to subtract, now in this case I would have to create a Filter? because the problem is that in the end it writes with . that is, enter 4.5 and exit 3.5 in this case the comma turned point in the final result, calculated but turned point, and this computed property would really be the best to do, I just don’t know exactly what it would be yet, I’m starting to poke around

  • Opa @flourigh, I just saw it. I think the reply of fernandosavio clarifies your doubts. In the background you need separate places to handle the calculations themselves and comma-formatted inputs/outputs.

3


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)

  • I thank you too much and I will study the references cited, I really need to study these method and coputed

Browser other questions tagged

You are not signed in. Login or sign up in order to post.