How can I change a numeric textbox value using code?

Question

I have a numeric textbox as follows:

<numeric-textbox id="value-field" :default-value="0.00" :min="0.00" :format="'n2'" :spinners="false" @change="amountChanged($event)" :disabled="amountDisabled" />

How can I set the value in code?

The things I've tried:

1. $('#value-field').val(0.00); - this works temporarily but changes back to the previous value when it gets the focus

2. I tried a model like v-model="myValue" but changing the value in code doesn't update the field.

I can't figure out what I need to do to get it to change!

Answer 1

You should use v-model directive shorthand or :value bind and @input event. (vue docs)

FULL DEMO: https://stackblitz.com/edit/gzbkbk-maqc4a?file=src/main.vue

---

• With v-model:

<numerictextbox v-model="myValue" />

data() {
  return {
    myValue: 5
  };
},
methods: {
  updateMyValueProgrammatically() {
    this.myValue = 10;
  }
}

• With :value and @input:

<numerictextbox :value="myValue" @input="onInput" />

data() {
  return {
    myValue: 5
  };
},
methods: {
  onInput(e) {
    this.myValue = e.target.value;
  },
  updateMyValueProgrammatically() {
    this.myValue = 10;
  }
}