Vue自定义uppercase指令异常：输入值最后一位仍为小写

问题原因 #

你编写的v-uppercase指令仅在元素挂载完成时执行一次，但Vue的v-model双向绑定是基于input事件触发同步的：

• 用户输入字符时，浏览器先触发input事件，v-model会立刻把输入的原始字符（未转大写的最后一个字符）同步到testInput
• 之后指令才会修改输入框的value为大写，但此时v-model的同步流程已经结束，所以testInput里的最后一个字符始终是小写。

修复方案 #

需要让指令监听输入事件，实时处理输入值，并手动触发input事件让v-model同步转大写后的值：

app.directive('uppercase', (el) => {
  const updateValue = () => {
    el.value = el.value.toUpperCase()
    // 手动触发input事件，通知v-model更新同步后的值
    el.dispatchEvent(new Event('input'))
  }

  // 初始化时处理已有值
  updateValue()
  // 监听输入事件，实时转换
  el.addEventListener('input', updateValue)
  // 监听失焦事件，确保最终值完全大写
  el.addEventListener('blur', updateValue)

  // 组件卸载时清理监听，避免内存泄漏
  return () => {
    el.removeEventListener('input', updateValue)
    el.removeEventListener('blur', updateValue)
  }
})

这样修改后，每次用户输入字符时，会先将输入框的值转为大写，再触发input事件让v-model同步这个大写值，testInput就会和输入框显示的内容完全一致了。

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