How in vue for input number to limit the number of input characters, for example, only 2 digits?

Question

Vue.js

Found such solution but not on vue https://jsfiddle.net/DRSDavidSoft/zb4ft1qq/2/
But oninput doesn't work. I suspect due to vue

Answer 1

make a directive that will adjust the number of characters:

const handlers = new Map();

function updateHandler(el, binding) {
  el.removeEventListener('input', handlers.get(el));

  const handler = () => {
    const value = el.value.replace(/\D/g, '').slice(0, binding.value);
    if (value !== el.value) {
      el.value = value;
      el.dispatchEvent(new Event('input'));
    }
  };
  handler();
  handlers.set(el, handler);

  el.addEventListener('input', handler);
}

Vue.directive('maxlen', {
  bind: updateHandler,
  update: updateHandler,
  unbind(el) {
    el.removeEventListener('input', handlers.get(el));
    handlers.delete(el);
  },
});

<input type="number" v-maxlen="2">