Vue Directive, v-model and input value, pass different values?

Question

Vue.js

Good day to all!

There is a directive for working with numbers in INPUT, the main task is to divide 1,000,000, and work with fractions. Everything works great, but there is one thing. 1000000

-> INT

"1 000 000" -> String

model) to pass an unformatted number, that is, remove spaces, and so on .. Please tell me.

Of course, after each work in the component itself, you can parse, remove spaces, and so on, but this directive will be used quite a lot in the project, so I would like it to work automatically ..

Answer 1

Set to an unformatted value; pass the input event - so that the handler set by the directive v-modelupdates the data in the component; set the formatted value. To prevent recursive handling of input events, check isTrusted :

function updateValue(el) {
  el.value = el.value, из которого удалено всё, кроме цифр;
  el.dispatchEvent(new Event('input'));
  el.value = форматированное значение el.value;
}

function onInput(e) {
  if (e.isTrusted) {
    updateValue(e.target);
  }
}

Vue.directive('number', {
  bind(el) {
    el.addEventListener('input', onInput);
    updateValue(el);
  },
  update(el) {
    updateValue(el);
  },
  unbind(el) {
    el.removeEventListener('input', onInput);
  },
});

https://jsfiddle.net/Lsg6ct57/2/