v-text-field（number类型）点击箭头异常连续增减问题求助

我使用了type="number"的v-text-field组件，代码如下：

<v-text-field
 :label="$t('enterNumColsLabel')"
 outlined
 v-model="numRows"
 type="number"
 min=0
>
</v-text-field>

正常情况下点击箭头数值增减1，按住箭头会持续增减直到松开，但偶尔会出现点击箭头后数值一直自动变化，必须点击其他区域才停止的无规律问题。

可行的解决办法 #

• 明确指定step属性并强制数值绑定
  给输入框加上step="1"，同时用v-model.number强制绑定数值类型（初始化numRows时设为0而非字符串）：

  <v-text-field
   :label="$t('enterNumColsLabel')"
   outlined
   v-model.number="numRows"
   type="number"
   min="0"
   step="1"
  >
  </v-text-field>
  

  这样能避免因数据类型不匹配或步进值模糊导致的浏览器原生交互异常。

• 手动接管箭头的步进逻辑
  通过监听鼠标的按下、抬起、离开事件，自己控制数值的增减，绕过浏览器原生的步进机制：

  <v-text-field
   :label="$t('enterNumColsLabel')"
   outlined
   v-model="numRows"
   type="number"
   min="0"
   @mousedown.native="handleArrowPress"
   @mouseup.native="stopStepping"
   @mouseleave.native="stopStepping"
  >
  </v-text-field>
  

  对应的脚本逻辑：

  export default {
    data() {
      return {
        numRows: 0,
        stepTimer: null
      }
    },
    methods: {
      handleArrowPress(e) {
        // 判定点击的是输入框的上下箭头
        const arrowIcon = e.target.querySelector('.v-icon')
        if (!arrowIcon) return
  
        const isUp = arrowIcon.textContent === 'arrow_drop_up'
        // 先执行一次增减
        this.adjustNum(isUp)
        // 启动定时器持续增减
        this.stepTimer = setInterval(() => {
          this.adjustNum(isUp)
        }, 120)
      },
      adjustNum(isUp) {
        if (isUp) {
          this.numRows += 1
        } else {
          this.numRows = Math.max(this.numRows - 1, 0) // 不低于min值
        }
      },
      stopStepping() {
        if (this.stepTimer) {
          clearInterval(this.stepTimer)
          this.stepTimer = null
        }
      }
    },
    beforeUnmount() {
      this.stopStepping() // 组件销毁前清理定时器
    }
  }
  

• 升级Vuetify到最新稳定版
  这个异常大概率是特定版本的Vuetify或其依赖的浏览器交互bug，升级到当前分支的最新稳定版（比如v2.x的最终版或v3.x的正式版），很多这类边缘交互问题都会在版本迭代中修复。

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