<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"
到底是做什么的?我猜它们不能工作,因为我也能输入负数。
发布于 2019-07-30 16: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
}
})
发布于 2019-07-30 18: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))"
/>
发布于 2019-07-30 20: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
复制相似问题