vue.js - v-text-field 输入后返回字符串，即使它有类型号

Question

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

我有这样的事情。

问题 1) 只要我更改了数字或在其中输入了数字，它就会正确抛出数字值，但它的类型是字符串而不是数字，因此类型检查失败。如何让它以 type:number 的形式返回值？

问题 2)究竟是做什么的 step="any" and min="0"做？我猜它们不起作用，因为我也可以输入负数。

Answer 1

事实上 vuetify 返回字符串。作为解决方法，您可以使用 number modifier.

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

你可以有一个这样的计算属性:

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

根据 step属性读取 Html input step .

而对于 min attr 读 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>

numberRule :

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

See it in action