Vue.js: how to format a value in a v-model?

Question

Vue.js: how to format a value in a v-model?

Navigation

#1 by (3 votes)
#2 by (2 votes)

0

I have the following problem, I need to format a value of an input, directly when the user is filling the field (@keypress or @input).

When I use the method to format out of the input it works, however if I try to use with the v-model I believe it conflicts with the values.

What would be an alternative to this question?

This is the method:

formatPrice(value) {
      let val = (value / 1).toFixed(2).replace(".", ",");
      return val.toString().replace(/\B(?=(\d{3})+(?!\d))/g, ".");
    }

This is the call:

    {{ formatPrice(valorPrecoImovel) }}
      <input class="ipt-precoimovel" type="text" v-model="valorPrecoImovel" v-on:keypress="isNumber($event); formatPrice;" id="precoImovel">

I can not call the method inside the v-model , for example:

v-model="formatPrice(valorPrecoImovel)"

vue.js

asked by anonymous 29.08.2018 / 17:01

2 answers

3

v-model is for assignment only. You will not be able to format the results in the way that you called v-model="formatPrice(valorPrecoImovel)" because it is not an assignment expression.

What I suggest to you is to leave v-model free to set the values and format it through a callback in @input .

window.addEventListener('load', function () {
  
  new Vue({
   el: "#app",
   data: {
       meu_valor: 0
   },
   methods: {
    somenteNumeros: function (valor) {
      return (valor + '').replace(/\D+/g, '');
    }
   }
  })
  
})

<script defer src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.1.10/vue.min.js"></script><divid="app">
    
<input type="text" @input="meu_valor = somenteNumeros(meu_valor)" v-model="meu_valor">

{{ meu_valor }}
</div>

29.08.2018 / 17:16

Problem with Access-Control-Allow-Origin in XHR with Javascript What is the difference between self and __CLASS__? [duplicate]

score 2 · Accepted Answer

What you want to do has some complexity because you match v-model with the formatting of the input value that the user is inserting.

You can do this by using computed and values using setters and getters to get more control over your value. Combining this with a variable / internal property meu_valor you can do what you are looking for.

It is an aspect to deal with (which I believe is beyond the scope of the question) which is the positioning of the cursor when writing.

A hint of the first part (which you describe in the question) would be:

new Vue({
  el: "#app",
  data: {
    meu_valor: '0,00'
  },
  computed: {
    valorPrecoImovel: {
      // getter
      get: function() {
        return this.meu_valor;
      },
      // setter
      set: function(newValue) {
        this.meu_valor = this.formatPrice(newValue);
      }
    }
  },
  methods: {
    formatPrice(value) {
      const val = Number(value.replace(",", "."));
      if (!val) return '0,00';
      const valueString = val.toFixed(2).replace(".", ",");
      return valueString.replace(/\B(?=(\d{3})+(?!\d))/g, ".");
    }
  }
})

<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.1.10/vue.min.js"></script><divid="app">
  <input class="ipt-precoimovel" type="text" v-model="valorPrecoImovel" ref="precoImovel" id="precoImovel">
</div>