更新模糊输入的Vue指令

Question

我正在尝试实现一个指令，该指令将减少对blur事件的输入值：

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

您需要触发input事件以让Vue知道值已被更改。

一旦检测到输入值与当前值不同，就执行此操作(以避免无限递归)

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

Answer 2

参考如下：https://stackoverflow.com/a/49602559/1364747

1. 尝试“输入”事件
2. 尝试绑定方法，如果上面的节点不工作