v-text-field在键入后返回字符串，即使它的类型为number
<VTextField
:value="addOnStartingPrice"
solo
outline
reverse
append-icon="attach_money"
type="number"
min="0"
step="any"
@input="$emit('update:addOnStartingPrice', $event)"
/>我有这样的东西。
问题1)一旦我更改了其中的数字或类型，它就正确地抛出了Numer值，但它的类型是String而不是number，因此类型检查失败。如何让它以type:number的形式返回值？
问题2) step="any" and min="0"到底是做什么的？我猜它们不能工作，因为我也能输入负数。
回答 4
Stack Overflow用户
发布于 2019-07-31 00:20:19
实际上，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属性，请阅读Html input min
您还可以使用vuetify rules检查用户是否输入了正数。示例：
<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
}
})Stack Overflow用户
发布于 2019-07-31 02:17:18
只需在@input处理程序中转换为Number即可。
<VTextField
:value="addOnStartingPrice"
solo
outline
reverse
append-icon="attach_money"
type="number"
min="0"
step="any"
@input="$emit('update:addOnStartingPrice', Number($event))"
/>Stack Overflow用户
发布于 2019-07-31 04:53:59
作为InputElements的value属性的issue lies here是string。
它在需要的时候获取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
计算：{ computedAddOnStartingPrice：{ get () { return this.addOnStartingPrice }，set (newVal) { this.$emit('update:addOnStartingPrice'，newVal) } }
https://stackoverflow.com/questions/57275723
复制相似问题
腾讯云开发者
