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

Posted 2023-02-22

【中文标题】v-text-field 在输入后返回字符串，即使它有类型号

【英文标题】：v-text-field returns string after typing even though it has type number

【发布时间】：2019-12-08 02:03:15

【问题描述】：

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

【参考方案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

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

    <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

【讨论】：

我不能拥有 v-model。我正在使用 :value 道具。它可以作为：value.number 完成吗？我不这么认为。

是的，您可以拥有 v-model。删除:value，添加一个 v-model 和一个计算属性，如我在答案中所示。

【参考方案2】：

只需在@input 处理程序中转换为Number。

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

【参考方案3】：

作为 InputElements 的 value 属性的issue lies here 是字符串。

它会在需要时获得casted

---

您可以做的一件事是通过扩展/覆盖“修复”：

import * as comps from "vuetify/es5/components";

...

const override = comps.VTextField.extend(
  onInput(e) 
    const target = e.target;
    if (this.type !== "number") this.internalValue = target.value;
    else 
      this.internalValue = target.valueAsNumber;
    
    this.badInput = target.validity && target.validity.badInput;
  
);
Vue.component('NewVTextField, override);

---

或$emit(+$event) 的“解决方法”，因为这似乎是intended 路径

---

但我想你应该使用 setter, getter 方法 - 因为你也可以在 setter 中链接验证器

检查：@roli loli：

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