Vuetify的v-text-field最大值限制input事件仅生效一次如何解决

问题根因 #

Vuetify的v-text-field组件内部独立维护了输入框的显示状态，当你绑定的变量没有发生实际值变化时（比如首次赋值为50后，后续再次赋值50，Vue响应式系统会判定值无变更，不会触发组件更新），组件的显示状态就无法和绑定变量同步，才会出现实际绑定值正确但输入框显示异常的问题。原生HTML输入框没有封装这层内部状态，所以不会触发该问题。

可用解决方案 #

方案1：强制触发响应式更新 #

赋值最大值时先清空值，再通过nextTick异步设回目标值，主动触发值变更通知：

const MAX_COUNT = 50
function handleInput(inputVal) {
  const parsedNum = parseInt(inputVal)
  if (isNaN(parsedNum) || parsedNum > MAX_COUNT) {
    // 先赋值为空触发值变化
    this.count = ''
    this.$nextTick(() => {
      this.count = MAX_COUNT
    })
    return
  }
  this.count = parsedNum
}

方案2：直接同步原生输入框显示值 #

通过ref获取组件内部的原生输入元素，直接覆盖显示值：

<template>
  <!-- 给组件加ref属性 -->
  <v-text-field
    v-model="count"
    @input="handleInput"
    ref="numInput"
  />
</template>
<script>
export default {
  data() {
    return { count: 0 }
  },
  methods: {
    handleInput(inputVal) {
      const MAX_COUNT = 50
      const parsedNum = parseInt(inputVal)
      if (isNaN(parsedNum) || parsedNum > MAX_COUNT) {
        this.count = MAX_COUNT
        // 直接修改原生输入框的显示值
        this.$refs.numInput.$el.querySelector('input').value = MAX_COUNT
        return
      }
      this.count = parsedNum
    }
  }
}
</script>

方案3：用key属性强制组件重绘 #

给组件绑定动态key，校验不通过时更新key触发组件重绘，自动同步绑定值：

<template>
  <v-text-field
    v-model="count"
    @input="handleInput"
    :key="inputRefreshKey"
  />
</template>
<script>
export default {
  data() {
    return { 
      count: 0,
      inputRefreshKey: 0
    }
  },
  methods: {
    handleInput(inputVal) {
      const MAX_COUNT = 50
      const parsedNum = parseInt(inputVal)
      if (isNaN(parsedNum) || parsedNum > MAX_COUNT) {
        this.count = MAX_COUNT
        // 更新key触发组件重绘
        this.inputRefreshKey++
        return
      }
      this.count = parsedNum
    }
  }
}
</script>

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