Input field's binded value does not update in Vue

Question

I am expecting from below code that when we input minus sign, vue will replace nevative value to positive.

<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);
  }
}

I get correct debug output:

"inputted value:"
-1234567890123
"localValue:"
1234567890123

But in input field -1234567890123 does not change to 1234567890123. Why?

Why I don't use v-model?

Maybe I should. But first I want to understand why it does not work without v-model. I am expecting that binded input field value will change according respective variable - if I don't misunderstand the documentation, it's a default behaviour.

Also, just v-bind required for input filtering for modification. v-model has some modifiers, but it could not be conditional.

score 0 · Answer 1 · answered Sep 02 '20 at 07:46

0

i think :value is same as v-bind or :bind you can check difference between them HERE

if you dont want to use v-model, you can go for computed but its better and easier to use v-model

answered Sep 02 '20 at 07:46

Hani Gerges

92
1
11

Thank you for the answer. I'm sorry, but there is the incongruity with one of answer on question that you mentioned: "v-bind:value is called one way binding that means: you can change input value by changing bound data". In means that `this.localValue = newActualValue.replace("-", "");` must entail the changed on displaying value, but it does not happen. – Takeshi Tokugawa YD Sep 02 '20 at 08:21

Input field's binded value does not update in Vue

Why I don't use v-model?

1 Answers1