时间戳

首页 > 解决方案 > v-text-field 在输入后返回字符串，即使它有类型号

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

问题描述

<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"什么？我猜它们不起作用，因为我也可以输入负数。

标签： vue.jsvuejs2vue-componentvuetify.js

解决方案

确实 vuetify 返回字符串。作为一种解决方法，您可以使用数字修饰符。

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

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

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

根据step属性读取Html 输入步骤。

而对于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
    }
  })

看到它在行动

推荐阅读