Vue директива для обновления ввода на размытие

Question

Я пытаюсь реализовать директиву, которая будет обрезать значение ввода для события размытия:

import { DirectiveOptions } from "vue";

const Autotrim: DirectiveOptions = {
    inserted(el) {
        if(!(el instanceof HTMLInputElement) && !(el instanceof HTMLTextAreaElement)) {
            throw 'Cannot apply v-autotrim directive to a non-input element!';
        }

        el.addEventListener('blur', () => {
           if(el.value)
               el.value = el.value.trim();
        });
    }
};

Ввод обновлен, но привязанного значения в модели нет, и после любогоизменить где-то еще в компоненте, он возвращается к неотрезанному состоянию.

Как правильно убедиться, что модель также обновлена?

РЕДАКТИРОВАТЬ ВотСсылка на кодовую ссылку, чтобы попробовать: https://codepen.io/impworks/pen/mddMPyx

Answer 1

См. Это: https://stackoverflow.com/a/49602559/1364747

1. Попробуйте событие 'input'
2. Попробуйте метод bind и vnode, если указанное выше не работает

Answer 2

Вам нужно вызвать событие input , чтобы сообщить Vue, что значение было изменено.

Сделайте это, если вы обнаружили, что входное значениеотличается от текущего значения (чтобы избежать бесконечной рекурсии)

if (el.value && el.value !== el.value.trim()) {
    el.value = el.value.trim();
    el.dispatchEvent(new Event('input'));
}