How to add data mask in an and not using npm

Question

I can get salary data from my database using vue js v-model like this

but i want to add data mask to look like this

here is my code for my retrieve, the field key salary / gaji is a double, i dont know how to add data mask using vue js, can anyone help me??

<div class="form-row">

      <div class="form-group col-md-6">

         <label class="col-form-label">Salary</label>
         <input type="text" class="form-control" v-model="nasabah.form.salary">

      </div>

  </div>

Does this answer your question? [VueJs Custom currency mask](https://stackoverflow.com/questions/50373777/vuejs-custom-currency-mask) — Yondonjamts Ganzorig, Aug 14 '20 at 07:37
https://github.com/RobinHerbots/Inputmask This one works fine in vue js without npm package. — Dhaval Chheda, Aug 14 '20 at 07:43

score 0 · Answer 1 · answered Aug 14 '20 at 07:18

0

I hope this can help : v-mask package

answered Aug 14 '20 at 07:18

susanta96

89
5

1

i'm not using npm – M Andre Juliansyah Aug 14 '20 at 07:22

score 0 · Answer 2 · answered Aug 14 '20 at 07:42

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>

where is the v-model ? – M Andre Juliansyah Aug 14 '20 at 08:50 — M Andre Juliansyah, Aug 14 '20 at 08:50
You react to the changes manually via `@change` event. – Pierre Said Aug 14 '20 at 08:54 — Pierre Said, Aug 14 '20 at 08:54

score -1 · Answer 3 · edited Jul 16 '22 at 04:24

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

How to add data mask in an and not using npm

3 Answers3