Vue 指令更新模糊输入答案

【问题标题】：Vue directive to update input on blurVue 指令更新模糊输入
【发布时间】：2020-02-23 16:50:11
【问题描述】：

我正在尝试实现一个指令，该指令将修剪模糊事件的输入值：

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();
        });
    }
};

输入已更新，但模型中的绑定值未更新，并且在组件中的其他位置发生任何更改后，它会恢复为未修剪状态。

确保模型也得到更新的正确方法是什么？

编辑这里有一个codepen链接可以尝试： https://codepen.io/impworks/pen/mddMPyx

【问题讨论】：

标签： vue.js dom-events onblur vue-directives

【解决方案1】：

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

一旦您检测到输入值与当前值不同（以避免无限递归），请执行此操作

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

【讨论】：

不幸的是没有为我工作。请检查更新帖子中的 codepen 链接：输入“foo”作为名字，按 Tab（查看正在使用的修剪），然后开始在姓氏中输入任何内容，修剪将被撤消
我使用了错误的事件类型，VueJS 正在监听input 事件。我用input 尝试了codepen 示例，它运行良好。

【解决方案2】：

参考这个： https://stackoverflow.com/a/49602559/1364747

尝试“输入”事件
如果上述方法不起作用，请尝试 bind 方法和 vnode

【讨论】：