v-text-field returns string after typing even though it has type number

Question

<VTextField
                :value="addOnStartingPrice"
                solo
                outline
                reverse
                append-icon="attach_money"
                type="number"
                min="0"
                step="any"
                @input="$emit('update:addOnStartingPrice', $event)"
              />

I have something like this.

Question 1) as soon as i change the number or type in it, it throws number value correctly, but its type is String instead of number, so type check gets failed. How do I get it to return value as type:number?

Question 2) what exactly does step="any" and min="0" do? They don't work I guess, because i can type negative numbers too.

Answer 1

Indeed vuetify returns string. As a workaround you can use number modifier.

<v-text-field type="number" v-model.number="computedAddOnStartingPrice" />

And you can have a computed property like this:

computed: {
  computedAddOnStartingPrice: {
    get () { return this.addOnStartingPrice },
    set (newVal) { this.$emit('update:addOnStartingPrice', newVal) }
  }
}

As per the step attribute read Html input step.

And for min attr read Html input min

You can also use vuetify rules to check if the user has entered a positive number. Example:

    <v-text-field
      type="number"   
      step="any"
      min="0"
      :rules="[numberRule]"
      v-model.number="computedAddOnStartingPrice"
    ></v-text-field>

The numberRule:

  data: () => ({
    //...
    numberRule: val => {
      if(val < 0) return 'Please enter a positive number'
      return true
    }
  })

See it in action

Answer 2

Just convert in to Number in @input handler.

<VTextField
  :value="addOnStartingPrice"
  solo
  outline
  reverse
  append-icon="attach_money"
  type="number"
  min="0"
  step="any"
  @input="$emit('update:addOnStartingPrice', Number($event))"
  />