输入字段的绑定值在Vue中不会更新

时间:2020-09-02 06:15:05

标签: vue.js

我期望从下面的代码中,当我们输入减号时,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绑定即可进行输入过滤以进行修改。 v-model有一些修饰符,但这不是有条件的。

1 个答案:

答案 0 :(得分:0)

我认为:value与v-bind或:bind相同,您可以检查它们之间的差异HERE

如果您不想使用v模型,可以进行计算,但是使用v模型更好,更容易