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

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

3 голосов
/ 28 октября 2019

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

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

Ответы [ 2 ]

2 голосов
/ 28 октября 2019

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

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

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

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

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