如何用自定义指令直接修改v-model值？实时转写输入异常排查

我看了你的问题，核心问题出在自定义指令的触发时机上。你用的update钩子是在指令绑定的值变化时才会执行，但和v-model的双向绑定数据流不同步，导致最后输入的字符没来得及被转写就被v-model的原始值覆盖了。

问题分析 #

当你输入最后一个字符时，流程大概是这样的：

1. 用户输入字符，输入框的value先变成包含新字符的原始值
2. v-model检测到输入事件，把原始值同步到requestHotels.travellers[index].first_name
3. 指令的update钩子触发，转写输入框的value
4. 但此时v-model可能已经把刚才同步的原始值又回写到了输入框，导致最后一个转写后的字符被覆盖

修复方案 #

把指令改成监听输入框的input事件，实时处理输入值，同时手动触发input事件确保v-model同步转写后的值：

directives: {
  transliterate: {
    bind(el) {
      // 监听输入事件，每次输入/粘贴都触发转写
      const handleInput = () => {
        const transliterated = tr(el.value);
        if (transliterated !== el.value) {
          el.value = transliterated;
          // 手动触发input事件，让v-model同步更新绑定的数据
          el.dispatchEvent(new Event('input'));
        }
      };

      el.addEventListener('input', handleInput);

      // 解绑时移除事件监听，避免内存泄漏
      el._transliterateHandler = handleInput;
    },
    unbind(el) {
      el.removeEventListener('input', el._transliterateHandler);
    }
  }
}

为什么这样有效？ #

• 直接监听input事件，用户每一次输入操作都会立即触发转写，不会错过任何字符
• 转写后手动触发input事件，确保v-model能同步到转写后的结果，避免双向绑定的数据流冲突
• 添加解绑时的事件移除，防止组件销毁后残留事件监听导致内存泄漏

你的PUG代码不需要修改，保持原来的写法就可以：

input(v-model='requestHotels.travellers[index].first_name', v-transliterate='true')

内容的提问来源于stack exchange，提问作者Nadirbek Nazaraly