What's the proper way to implement formatting on v-model in Vue.js 2.0

Question

For a simple example: textbox to input currency data. The requirement is to display user input in \"$1,234,567\" format and remove decimal point.

I have tried vue direct

Answer 1

Using Vue custom directives + .toLocaleString() is also a very good option.

Vue.directive("currency", {
  bind(el, binding, vnode) {
    el.value = binding.value && Number(binding.value).toLocaleString('en-US', {style: 'currency', currency: !binding.arg ? 'USD' : binding.arg });
    el.onblur = function(e) {
      e.target.value = Number(e.target.value).toLocaleString('en-US', {style: 'currency', currency: !binding.arg ? 'USD' : binding.arg});
    };
    el.onfocus = function(e) {
      e.target.value =
        e.target.value && Number(e.target.value.replace(/[^\d.]/g, ""));
    };
    el.oninput = function(e) {
      vnode.context.$data[binding.expression] = e.target.value;
    };
  }
});

Here is the example link: https://codepen.io/Mahmoud-Zakaria/pen/YzPvNmO