Vue Directive, v-model и input value, передать разные значения?

Question

[mrs4z]

Всем доброго времени суток!

Есть директива, для работы с числами в INPUT, основная задача - это делить 1 000 000, ну и работа с дробями. Все чудесно работает, но есть одно но.

1000000 -> INT

"1 000 000" -> String

Как мне после изменения числа в INPUT отображать в INPUT непосредственно отформатированное число (с пробелами, запятыми и так далее ->>>> СЕЙЧАС ТАК И РАБОТАЕТ), но в модель (v-model) передать не отформатированное число, то есть убрать пробелы, и так далее.. Подскажите пожалуйста.

Конечно можно после каждой работы в самом компоненте парсить, убирать пробелы, и так далее, но данная директива будет использоваться достаточно много в проекте, поэтому, хотелось бы чтобы это работало в автоматическом режиме..

Comments

[Ромзес Панагиотис]

основная задача - это делить 1 000 000, ну и работа с дробями.

нужна функция форматирования числа, что-ли?

[tantumus21]

не понял вопроса, но, может быть, глянете в сторону модификаторов v-model. Например, v-model.string=””

[mrs4z]

Ромзес Панагиотис, tantumus21, нет, нужна не сама формула форматирования..

В диркетиве v-number я форматирую вот так:

el.value = el.value.replace(/ /g, "");
el.value = el.value.replace(/\B(?=(\d{3})+(?!\d))/g, " ");

Но мне надо в дате чтобы он вернул так:

// tpl
<input type="text" v-model="num" v-number>.  // вот тут при вводе 10000 выводится -> 10 000 (ТАК И ДОЛЖНО БЫТЬ)

// js
data() {
    return {
        num: 0.    // Соответственно после ввода в input выводится 10 000, а тут надо 10000
     }
}

Это тоже самое как в директиве с календарем где-то видел, в инпуте выводится нормальная дата (например 18.10.2020), а в data() { ... } выводится TIMESTAMP

====
Наверное не совсем так объяснил..
Вот у меня есть числа, большие числа, которые нуждаются в форматировании, а так же эти числа мне нужно отправлять в API, на входе просит Integer.. Соответственно из-за того, что я форматирую числа (10000 -> 10 000) - от из Integer переводит в Строку.

В данный момент у меня жесткий костыль, который берет все ключи и их значения, и делает parseInt().. Но мне интересно это сделать в директиве, потому что много где данная директива используется, а костыльные варианты типа - каждый раз перегонять в parseInt(), вообще не тема

Answer 1

[0xD34F]

Устанавливаете неотформатированное значение; передаёте событие input - чтобы обработчик, установленный директивой v-model, обновил данные в компоненте; устанавливаете отформатированное значение. Для предотвращения рекурсивной обработки событий input проверяете 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/

Comments

[mrs4z]

Прошло много времени, спустя месяцы уже сам разобрался, даже позабыв про этот топик, но в любом случае - спасибо огромное!