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 返回字符串。作为解决方法，您可以使用数字修饰符。

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

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

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

根据step属性 read Html input step。

对于minattr 读取Html 输入 min

您还可以使用vuetify 规则来检查用户是否输入了正数。例子：

    <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
    }
  })

看到它在行动