我期望从下面的代码中,当我们输入减号时,vue
会将负值替换为正值。
<input
type="number"
:value="localValue"
@input="$event => { onInput($event.target.value); }"
/>
import { Vue, Component, Prop, Emit, Watch, Model } from "vue-property-decorator";
@Component
export default class InputField extends Vue implements IValidatableControl {
@Model("input", { required: true, type: String }) private readonly value!: string;
@Prop({ default: false, type: Boolean }) private readonly forbidMinusSign!: boolean;
private localValue: string = "";
private created(): void {
this.localValue = this.value;
}
private onInput(newActualValue: string): void {
console.log("inputted value:");
console.log(newActualValue);
if (this.forbidMinusSign && newActualValue.includes("-")) {
this.localValue = newActualValue.replace("-", "");
console.log("localValue:");
console.log(this.localValue);
return;
}
this.localValue = newActualValue;
this.$emit("input", newActualValue);
}
}
我得到正确的调试输出:
"inputted value:"
-1234567890123
"localValue:"
1234567890123
但是在输入字段-1234567890123
中不会更改为1234567890123
。为什么?
也许我应该。但是首先,我想了解一下为什么没有v模型就无法工作。 我希望绑定的输入字段的值将根据相应的变量而变化-如果我不误解文档,这是默认行为。
此外,只需输入v绑定即可进行输入过滤以进行修改。 v-model
有一些修饰符,但这不是有条件的。