将 v-text-field 数字输入限制为单个数字答案

【问题标题】：Restrict v-text-field number input to single digit将 v-text-field 数字输入限制为单个数字
【发布时间】：2023-03-10 02:20:02
【问题描述】：

我正在尝试使用一系列 v-text-field 组件来构建 SMS 验证码组件，因此我需要将输入限制为单个数字。

<v-text-field
            v-for="(num, key) of code"
            :key="key"
            type="number"
            outlined
            v-model.number="num.char"
        ></v-text-field>

我发现其他答案建议使用诸如 maxlength 甚至 pattern 之类的道具，但这些似乎是 Vuetify V1 的旧答案......我正在使用最新版本的 V2

我可以将一个方法连接到 @input 事件以手动检查，但感觉可能缺少一个更简单的解决方案

【问题讨论】：

标签： vue.js vuetify.js

【解决方案1】：

你可以在数据函数中定义规则：

data() {
  return {
    rules: {
      counter: value => value.length <= 1 || 'Max 1 character',
    }
  }
}

然后在模板中

<v-text-field
  v-for="(num, key) of code"
  :key="key"
  type="number"
  outlined
  v-model.number="num.char"
  :rules="[rules.counter]"
></v-text-field>

或者你仍然可以使用maxlength属性

【讨论】：