create form number input and validate it

Question

How do I validate a number input field for positive integers correctly? I use these rules

  numberRules: [
    v => v.length > 0 || 'This field may not be empty',
    v => Number.isInteger(v) || 'The value must be an integer number',
    v => v > 0 || 'The value must be greater than zero'
  ]

but get wrong results. I created an example showing my wrong behaviour

https://codesandbox.io/s/vue-with-vuetify-eagles-yqxcc

To modify the textfield as a number input I added type="number" as a component property.

Answer 1

You get wrong result because v in your rules methods is actually string (yes yes, fun fact :) ).

You can:

1. change your rule to v => Number.isInteger(Number(v)) || "The value must be an integer number",

2. add .number modifier to v-model=... to looks like v-model.number=.... But in that case you first rule method wouldn't work, because v as number doesn't have .length