Vuetify2中如何限制v-text-field数字输入框仅可输入单个数字

你之前用type="number"时maxlength不生效是原生input的限制：type为number的输入框本身不支持maxlength属性，对应Vuetify的prop也就无法生效。可以通过以下两种简便方案实现需求：

方案1：使用tel类型（无需自定义逻辑，最简便） #

把type替换为tel即可适配Vuetify v2的原生props实现需求，移动端同样会弹出数字输入键盘，和原number类型体验一致：

<v-text-field
  v-for="(num, key) of code"
  :key="key"
  type="tel"
  outlined
  v-model.number="num.char"
  maxlength="1"
  pattern="[0-9]"
  :counter="1"
  hide-details="auto"
></v-text-field>

该方案完全使用Vuetify v2原生支持的属性，maxlength自动限制最多输入1位，pattern自动拦截非数字输入，无需额外编写自定义逻辑。

方案2：保留number类型（极简单行事件处理） #

如果业务要求必须使用number类型，只需加一行@input事件逻辑截断内容，配合min/max限制范围即可，无需编写复杂校验规则：

<v-text-field
  v-for="(num, key) of code"
  :key="key"
  type="number"
  outlined
  v-model.number="num.char"
  @input="num.char = num.char?.toString().slice(0,1) || ''"
  min="0"
  max="9"
></v-text-field>

输入时会自动仅保留第一位字符，同时限制输入范围为0-9。

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