Vue为Vuetify输入框v-model绑定值动态追加当前日期后缀的实现

原有实现的问题点 #

• 每一次键盘输入触发@input事件时，都会对已经拼接过时间后缀的整串值再次执行拼接操作，最终会出现输入一个字符就叠加一次时间的问题，比如输入"AB"，最后值会变成"A.03052024B.03052024"，完全不符合预期。
• 没有拆分「用户手动输入的纯文本」和「系统自动追加的后缀」两类内容，导致拼接操作没有可回溯的纯净输入基准，逻辑进入循环叠加的死胡同。
• 未适配Vuetify组件的事件传参特性：v-text-field的@input事件会把用户当前输入的最新值作为回调参数传入，原有方法没有接收这个参数，直接基于已经双向绑定后的带后缀的this.Name值做拼接，无法正常运行。

正确实现方式 #

方案1：输入完成（失焦）时追加后缀（体验最优） #

不建议在每敲一个字符的时候就实时拼后缀，否则用户修改中间内容时会反复触发后缀拼接，输入体验极差。推荐在输入框失焦、代表用户完成当前输入操作时，再统一追加时间后缀：

1. 拆分两个独立的响应式变量：一个专门存用户实时输入的纯内容，一个存最终带后缀的完整模型值
2. 把原来绑定在@input上的逻辑，改绑在@blur失焦事件上
3. 拼接时直接基于纯净输入值生成最终的Name值，不需要处理旧的叠加后缀

对应代码：
模板部分：

<v-text-field
  v-model="userRawInput"
  label="Please enter the Loan Number"
  required
  :rules="nameRules"
  outlined
  @blur="loanDate"
/>

脚本部分：

data() {
  return {
    userRawInput: '', // 存储用户手动输入的纯Loan编号内容
    Name: '' // 最终带时间后缀的模型值，和业务逻辑对接
  }
},
methods: {
  loanDate() {
    const d = new Date();
    const curr_date = d.getDate();
    const curr_month = d.getMonth() + 1; // 月份从0开始计数，需要+1
    const curr_year = d.getFullYear();
    const dateSuffix = `${curr_month}${curr_date}${curr_year}`
    // 基于纯净输入值拼接最终值，不会产生重复叠加
    this.Name = `${this.userRawInput}.${dateSuffix}`
  }
}

方案2：必须实时输入时追加后缀的处理逻辑 #

如果业务强制要求输入过程中实时显示带后缀的值，必须在每次拼接前，先把上一次追加的旧后缀剥离，拿到用户真实输入的纯内容，再做拼接：

loanDate(val) {
  // 先把上一次拼接的后缀截掉，拿到纯输入内容
  // 用固定分隔符把纯内容和后缀隔开，方便后续切割，比如固定用'.'作为内容和后缀的分界
  const pureInput = this.Name.split('.')[0]
  const d = new Date();
  const dateSuffix = `${d.getMonth()+1}${d.getDate()}${d.getFullYear()}`
  this.Name = `${pureInput}.${dateSuffix}`
}

注意：这种实时拼接的模式下，用户如果要修改已经输入的内容，输入框焦点位置会因为值被强制重置频繁跳动，实际使用体验会非常差，仅适合低修改频率的简单场景。

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