vue.jskendo-uikendonumerictextbox

How can I change a numeric textbox value using code?


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!


Solution

  • 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


    <numerictextbox v-model="myValue" />
    
    data() {
      return {
        myValue: 5
      };
    },
    methods: {
      updateMyValueProgrammatically() {
        this.myValue = 10;
      }
    }
    
    <numerictextbox :value="myValue" @input="onInput" />
    
    data() {
      return {
        myValue: 5
      };
    },
    methods: {
      onInput(e) {
        this.myValue = e.target.value;
      },
      updateMyValueProgrammatically() {
        this.myValue = 10;
      }
    }