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:

$('#value-field').val(0.00); - this works temporarily but changes back to the previous value when it gets the focus
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!

I've used `v-model` and works. Maybe the issue is another part of your code. Check this demo: https://stackblitz.com/edit/gzbkbk-maqc4a?file=src/main.vue — The.Bear, Mar 17 '21 at 00:36
That's good confirmation. Thanks I'll investigate that angle. — CompanyDroneFromSector7G, Mar 17 '21 at 08:32

score 1 · Accepted Answer · edited Sep 06 '22 at 19:23

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

How can I change a numeric textbox value using code?

1 Answers1