Vue中绑定v-model的输入框键盘事件修改值后模型未同步的问题

问题背景 #

我编写了一个键盘事件处理函数onCaseChange，用于通过Shift+上/下键快速转换输入内容的大小写（支持全选或选中文本），在非Vue环境下可正常运行，但在Vue项目中使用v-model绑定ref值时，触发快捷键后输入值会先变化再立刻恢复原状。

问题原因 #

这是Vue的v-model双向绑定机制导致的：直接修改输入框的value后，绑定的响应式ref并未同步更新，Vue在下一次更新周期会将ref的原始值重新同步到输入框，导致内容回滚。

解决方案 #

方案一：传递绑定的ref并手动同步 #

修改模板，将每个输入框对应的ref作为参数传递给事件处理函数，在函数中同时更新输入框值和ref的值，确保双向绑定同步。

修改后的组件模板

<template>
  <v-text-field 
    v-model="trademarkVerbal" 
    @keydown="(e) => onCaseChange(e, trademarkVerbal)" 
    label="Trademark verbal"
  />
  <v-text-field 
    v-model="otherValue1" 
    @keydown="(e) => onCaseChange(e, otherValue1)" 
    label="Other value 1"
  />
  <v-text-field 
    v-model="otherValue2" 
    @keydown="(e) => onCaseChange(e, otherValue2)" 
    label="Other value 2"
  />
</template>

更新后的onCaseChange函数

import { Ref } from 'vue'

export function onCaseChange(event: KeyboardEvent, model: Ref<string>) {
  if (event.shiftKey && (event.key === 'ArrowDown' || event.key === 'ArrowUp')) {
    const textfield = event.target as HTMLInputElement
    event.preventDefault()

    const processText = (str: string) => {
      return event.key === 'ArrowDown' ? str.toLowerCase() : str.toUpperCase()
    }

    const selectionStart = textfield.selectionStart
    const selectionEnd = textfield.selectionEnd

    if (!selectionStart || !selectionEnd) return

    let newValue: string
    if (selectionStart === selectionEnd) {
      newValue = processText(textfield.value)
    } else {
      const left = textfield.value.substring(0, selectionStart)
      const middle = textfield.value.substring(selectionStart, selectionEnd)
      const right = textfield.value.substring(selectionEnd)
      newValue = left + processText(middle) + right
    }

    // 同步更新输入框和绑定的ref
    textfield.value = newValue
    model.value = newValue

    // 恢复选区位置
    textfield.selectionStart = selectionStart
    textfield.selectionEnd = selectionEnd
  }
}

方案二：封装为自定义指令（推荐，复用性更强） #

创建Vue自定义指令，将大小写转换逻辑封装进去，无需在每个输入框传递ref，自动处理v-model的同步。

自定义指令实现（caseChanger.ts）

import type { Directive } from 'vue'

const vCaseToggle: Directive<HTMLInputElement> = {
  mounted(el) {
    const handleKeyDown = (event: KeyboardEvent) => {
      if (event.shiftKey && (event.key === 'ArrowDown' || event.key === 'ArrowUp')) {
        event.preventDefault()

        const processText = (str: string) => {
          return event.key === 'ArrowDown' ? str.toLowerCase() : str.toUpperCase()
        }

        const selectionStart = el.selectionStart
        const selectionEnd = el.selectionEnd

        if (!selectionStart || !selectionEnd) return

        let newValue: string
        if (selectionStart === selectionEnd) {
          newValue = processText(el.value)
        } else {
          const left = el.value.substring(0, selectionStart)
          const middle = el.value.substring(selectionStart, selectionEnd)
          const right = el.value.substring(selectionEnd)
          newValue = left + processText(middle) + right
        }

        // 更新输入框值
        el.value = newValue
        // 触发input事件，让v-model感知到变化并同步ref
        el.dispatchEvent(new Event('input'))

        // 恢复选区位置
        el.selectionStart = selectionStart
        el.selectionEnd = selectionEnd
      }
    }

    el.addEventListener('keydown', handleKeyDown)
    // 存储事件处理函数用于卸载时清理
    el._handleKeyDown = handleKeyDown
  },
  unmounted(el) {
    el.removeEventListener('keydown', el._handleKeyDown)
  }
}

export default vCaseToggle

在组件中使用自定义指令

<script setup lang="ts">
import { ref } from 'vue'
import vCaseToggle from './caseChanger'

const trademarkVerbal = ref("")
const otherValue1 = ref("")
const otherValue2 = ref("")
</script>

<template>
  <v-text-field v-model="trademarkVerbal" v-case-toggle label="Trademark verbal"/>
  <v-text-field v-model="otherValue1" v-case-toggle label="Other value 1"/>
  <v-text-field v-model="otherValue2" v-case-toggle label="Other value 2"/>
</template>

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