[Vuejs]-How to add data mask in an <input v-model=variable> and not using npm

by

0👍

I hope this can help : v-mask package

0👍

You can use a computed to format the displayed value in the input.

Vue.config.devtools = false;
Vue.config.productionTip = false;

var app = new Vue({
  el: '#app',
  data: {
    rawSalary: 0
  },
  methods: {
    onChange(e) {
    this.rawSalary = e.target.value;
    }
  },
  computed: {
    formattedSalary() {
      return this.rawSalary.toString().replace(/\B(?=(\d{3})+(?!\d))/g, ",")
    }
  }
})
<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.17/vue.js"></script>
<div id="app">
  <label>Salary</label>
  <input type="text" :value="formattedSalary" @change="onChange">
  
  <div>rawSalary : {{ rawSalary }}</div>
</div>

-1👍

You can use filter to format the number into currency, for example:

filters: {
  currencyFormat(val) {
    return (val).toFixed(2)
              .replace(/\d(?=(\d{3})+\.)/g, '$&,');
  }
}

Use pipes to use it on your template, for example:

<div>
  <input type="text" class="form-control" v-model="nasabah.form.salary | formatCurrency">
</div>

Please note that this will mutate your salary property with the formatted value

You can learn more about it here

Leave a comment