限制v-text字段的数字输入为单位数

Question

我正在尝试使用一系列v-text字段组件来构建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，但这些似乎是旧的答案V1的Vuetify…我正在使用最新版本的V2

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

Answer 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属性