Vue UI Components Documentation

Determines whether the widget's value could be null.

<template>
  <JqxNumberInput ref="myNumberInput"
    :allowNull="false"
  />
</template>
 
<script>
  import JqxNumberInput from 'jqwidgets-scripts/jqwidgets-vue/vue_jqxnumberinput.vue';
 
  export default {
    components: {
      JqxNumberInput
    }
  }
</script>

Sets or gets the input's number.

<template>
  <JqxNumberInput ref="myNumberInput"
    :decimal="2"
  />
</template>
 
<script>
  import JqxNumberInput from 'jqwidgets-scripts/jqwidgets-vue/vue_jqxnumberinput.vue';
 
  export default {
    components: {
      JqxNumberInput
    }
  }
</script>

Determines whether jqxNumberInput is disabled.

<template>
  <JqxNumberInput ref="myNumberInput"
    :disabled="true"
  />
</template>
 
<script>
  import JqxNumberInput from 'jqwidgets-scripts/jqwidgets-vue/vue_jqxnumberinput.vue';
 
  export default {
    components: {
      JqxNumberInput
    }
  }
</script>

Indicates the number of decimal places to use in numeric values.

<template>
  <JqxNumberInput ref="myNumberInput"
    :decimalDigits="3"
  />
</template>
 
<script>
  import JqxNumberInput from 'jqwidgets-scripts/jqwidgets-vue/vue_jqxnumberinput.vue';
 
  export default {
    components: {
      JqxNumberInput
    }
  }
</script>

Sets or gets the char to use as the decimal separator in numeric values.

<template>
  <JqxNumberInput ref="myNumberInput"
    :decimalSeparator="','"
  />
</template>
 
<script>
  import JqxNumberInput from 'jqwidgets-scripts/jqwidgets-vue/vue_jqxnumberinput.vue';
 
  export default {
    components: {
      JqxNumberInput
    }
  }
</script>

Sets or gets the digits in the input

<template>
  <JqxNumberInput ref="myNumberInput"
    :digits="8"
  />
</template>
 
<script>
  import JqxNumberInput from 'jqwidgets-scripts/jqwidgets-vue/vue_jqxnumberinput.vue';
 
  export default {
    components: {
      JqxNumberInput
    }
  }
</script>

Sets or gets the string that separates groups of digits to the left of the decimal in numeric values.

<template>
  <JqxNumberInput ref="myNumberInput"
    :groupSeparator="'.'"
  />
</template>
 
<script>
  import JqxNumberInput from 'jqwidgets-scripts/jqwidgets-vue/vue_jqxnumberinput.vue';
 
  export default {
    components: {
      JqxNumberInput
    }
  }
</script>

Sets or gets the number of digits in each group to the left of the decimal in numeric values.

<template>
  <JqxNumberInput ref="myNumberInput"
    :groupSize="2"
  />
</template>
 
<script>
  import JqxNumberInput from 'jqwidgets-scripts/jqwidgets-vue/vue_jqxnumberinput.vue';
 
  export default {
    components: {
      JqxNumberInput
    }
  }
</script>

Sets or gets the height of the input in pixels.

<template>
  <JqxNumberInput ref="myNumberInput"
    :height="25"
  />
</template>
 
<script>
  import JqxNumberInput from 'jqwidgets-scripts/jqwidgets-vue/vue_jqxnumberinput.vue';
 
  export default {
    components: {
      JqxNumberInput
    }
  }
</script>

Sets or gets the input's mode.

'advanced'- the number input behavior resembles a masked input with numeric mask

'simple'-the  widget works as a normal textbox, but restricts the user's input to numbers

<template>
  <JqxNumberInput ref="myNumberInput"
    :inputMode="'simple'"
  />
</template>
 
<script>
  import JqxNumberInput from 'jqwidgets-scripts/jqwidgets-vue/vue_jqxnumberinput.vue';
 
  export default {
    components: {
      JqxNumberInput
    }
  }
</script>

Sets or gets the input's minimum value.

<template>
  <JqxNumberInput ref="myNumberInput"
    :min="2"
  />
</template>
 
<script>
  import JqxNumberInput from 'jqwidgets-scripts/jqwidgets-vue/vue_jqxnumberinput.vue';
 
  export default {
    components: {
      JqxNumberInput
    }
  }
</script>

Sets or gets the input's maximum value.

<template>
  <JqxNumberInput ref="myNumberInput"
    :max="50"
  />
</template>
 
<script>
  import JqxNumberInput from 'jqwidgets-scripts/jqwidgets-vue/vue_jqxnumberinput.vue';
 
  export default {
    components: {
      JqxNumberInput
    }
  }
</script>

Sets or gets the string to use as negative symbol.

<template>
  <JqxNumberInput ref="myNumberInput"
    :negativeSymbol="'-'"
  />
</template>
 
<script>
  import JqxNumberInput from 'jqwidgets-scripts/jqwidgets-vue/vue_jqxnumberinput.vue';
 
  export default {
    components: {
      JqxNumberInput
    }
  }
</script>

Determines the widget's place holder displayed when the widget's value is null.

<template> 
  <JqxNumberInput ref="myNumberInput" :placeHolder="'Null Value'" /> 
</template> 
 
<script> 
  import JqxNumberInput from 'jqwidgets-scripts/jqwidgets-vue/vue_jqxnumberinput.vue'; 
 
  export default { 
    components: { 
      JqxNumberInput 
    }, 
    mounted: function () { 
      this.$refs.myNumberInput.val(null); 
    } 
  } 
</script>

Sets or gets the prompt char displayed when an editable char is empty.

'_'

'?'

';'

'#'

<template>
  <JqxNumberInput ref="myNumberInput"
    :promptChar="'#'"
  />
</template>
 
<script>
  import JqxNumberInput from 'jqwidgets-scripts/jqwidgets-vue/vue_jqxnumberinput.vue';
 
  export default {
    components: {
      JqxNumberInput
    }
  }
</script>

Sets or gets a value indicating whether widget's elements are aligned to support locales using right-to-left fonts.

<template>
  <JqxNumberInput ref="myNumberInput"
    :rtl="true" :spinButtons="true"
  />
</template>
 
<script>
  import JqxNumberInput from 'jqwidgets-scripts/jqwidgets-vue/vue_jqxnumberinput.vue';
 
  export default {
    components: {
      JqxNumberInput
    }
  }
</script>

Sets or gets the readOnly state of the input.

<template>
  <JqxNumberInput ref="myNumberInput"
    :readOnly="true"
  />
</template>
 
<script>
  import JqxNumberInput from 'jqwidgets-scripts/jqwidgets-vue/vue_jqxnumberinput.vue';
 
  export default {
    components: {
      JqxNumberInput
    }
  }
</script>

Sets or gets the spin mode.

'advanced'- the value is increased depending on the caret's position

'simple'-pecifies that the spin behavior is disabled

<template>
  <JqxNumberInput ref="myNumberInput"
    :spinButtons="true" :spinMode="'simple'"
  />
</template>
 
<script>
  import JqxNumberInput from 'jqwidgets-scripts/jqwidgets-vue/vue_jqxnumberinput.vue';
 
  export default {
    components: {
      JqxNumberInput
    }
  }
</script>

Shows or hides the spin buttons.

<template>
  <JqxNumberInput ref="myNumberInput"
    :spinButtons="true"
  />
</template>
 
<script>
  import JqxNumberInput from 'jqwidgets-scripts/jqwidgets-vue/vue_jqxnumberinput.vue';
 
  export default {
    components: {
      JqxNumberInput
    }
  }
</script>

Sets or gets the width of the spin buttons.

<template>
  <JqxNumberInput ref="myNumberInput"
    :spinButtons="true" :spinButtonsWidth="30"
  />
</template>
 
<script>
  import JqxNumberInput from 'jqwidgets-scripts/jqwidgets-vue/vue_jqxnumberinput.vue';
 
  export default {
    components: {
      JqxNumberInput
    }
  }
</script>

Sets or gets the increase/decrease step.

<template>
  <JqxNumberInput ref="myNumberInput"
    :spinButtons="true" :spinButtonsStep="10"
  />
</template>
 
<script>
  import JqxNumberInput from 'jqwidgets-scripts/jqwidgets-vue/vue_jqxnumberinput.vue';
 
  export default {
    components: {
      JqxNumberInput
    }
  }
</script>

Sets or gets the string to use as currency or percentage symbol.

<template>
  <JqxNumberInput ref="myNumberInput"
    :symbol="'$'"
  />
</template>
 
<script>
  import JqxNumberInput from 'jqwidgets-scripts/jqwidgets-vue/vue_jqxnumberinput.vue';
 
  export default {
    components: {
      JqxNumberInput
    }
  }
</script>

Sets or gets the position of the symbol in the input.

'left'

'right'

<template>
  <JqxNumberInput ref="myNumberInput"
    :symbol="'@'" :symbolPosition="'right'"
  />
</template>
 
<script>
  import JqxNumberInput from 'jqwidgets-scripts/jqwidgets-vue/vue_jqxnumberinput.vue';
 
  export default {
    components: {
      JqxNumberInput
    }
  }
</script>

Sets or gets the alignment.

<template>
  <JqxNumberInput ref="myNumberInput"
    :textAlign="'left'"
  />
</template>
 
<script>
  import JqxNumberInput from 'jqwidgets-scripts/jqwidgets-vue/vue_jqxnumberinput.vue';
 
  export default {
    components: {
      JqxNumberInput
    }
  }
</script>

Determines the template as an alternative of the default styles.

'default' - the default template. The style depends only on the "theme" property value.

'primary' - dark blue style for extra visual weight.

'success' - green style for successful or positive action.

'warning' - orange style which indicates caution.

'danger' - red style which indicates a dangerous or negative action.

'info' - blue button, not tied to a semantic action or use.

<template>
  <JqxNumberInput ref="myNumberInput"
    :spinButtons="true" :template="'success'"
  />
</template>
 
<script>
  import JqxNumberInput from 'jqwidgets-scripts/jqwidgets-vue/vue_jqxnumberinput.vue';
 
  export default {
    components: {
      JqxNumberInput
    }
  }
</script>

Sets the widget's theme.

• Include the theme's CSS file after jqx.base.css.
  The following code example adds the 'material' theme.

  
  <link rel="stylesheet" href="../../jqwidgets/styles/jqx.base.css" type="text/css" />
  <link rel="stylesheet" href="../../jqwidgets/styles/jqx.material.css" type="text/css" />
  
  

• Set the widget's theme property to 'material' when you initialize it.

<template>
  <JqxNumberInput ref="myNumberInput"
    :theme="'material'"
  />
</template>
 
<script>
  import JqxNumberInput from 'jqwidgets-scripts/jqwidgets-vue/vue_jqxnumberinput.vue';
 
  export default {
    components: {
      JqxNumberInput
    }
  }
</script>

<template>
  <JqxNumberInput ref="myNumberInput"
    :value="100"
  />
</template>
 
<script>
  import JqxNumberInput from 'jqwidgets-scripts/jqwidgets-vue/vue_jqxnumberinput.vue';
 
  export default {
    components: {
      JqxNumberInput
    }
  }
</script>

Sets or gets the width of the input in pixels. Only positive values have effect.

<template>
  <JqxNumberInput ref="myNumberInput"
    :width="250"
  />
</template>
 
<script>
  import JqxNumberInput from 'jqwidgets-scripts/jqwidgets-vue/vue_jqxnumberinput.vue';
 
  export default {
    components: {
      JqxNumberInput
    }
  }
</script>

This event is triggered when the value is changed and the control's focus is lost.

Code examples

Bind to the change event of jqxNumberInput.

<template>
  <JqxNumberInput ref="myNumberInput" @change="onChange($event)"
   
  />
</template>
 
<script>
  import JqxNumberInput from 'jqwidgets-scripts/jqwidgets-vue/vue_jqxnumberinput.vue';
 
  export default {
    components: {
      JqxNumberInput
    },
    methods: {
      onChange: function (event) {
        alert('do something...');
      }
    }
  }
</script>

This event is triggered when the user entered entered a text.

Code examples

Bind to the textchanged event of jqxNumberInput.

<template>
  <JqxNumberInput ref="myNumberInput" @textchanged="onTextchanged($event)"
   
  />
</template>
 
<script>
  import JqxNumberInput from 'jqwidgets-scripts/jqwidgets-vue/vue_jqxnumberinput.vue';
 
  export default {
    components: {
      JqxNumberInput
    },
    methods: {
      onTextchanged: function (event) {
        alert('do something...');
      }
    }
  }
</script>

This event is triggered after value is changed.

Code examples

Bind to the valueChanged event of jqxNumberInput.

<template>
  <JqxNumberInput ref="myNumberInput" @valueChanged="onValueChanged($event)"
   
  />
</template>
 
<script>
  import JqxNumberInput from 'jqwidgets-scripts/jqwidgets-vue/vue_jqxnumberinput.vue';
 
  export default {
    components: {
      JqxNumberInput
    },
    methods: {
      onValueChanged: function (event) {
        alert('do something...');
      }
    }
  }
</script>

Clears the value.

<template>
  <JqxNumberInput ref="myNumberInput"
   
  />
</template>
 
<script>
  import JqxNumberInput from 'jqwidgets-scripts/jqwidgets-vue/vue_jqxnumberinput.vue';
 
  export default {
    components: {
      JqxNumberInput
    },
    mounted: function () {
      this.$refs.myNumberInput.decimal = 200;
      this.$refs.myNumberInput.clear();
    }
  }
</script>

Destroys the widget.

<template>
  <JqxNumberInput ref="myNumberInput"
   
  />
</template>
 
<script>
  import JqxNumberInput from 'jqwidgets-scripts/jqwidgets-vue/vue_jqxnumberinput.vue';
 
  export default {
    components: {
      JqxNumberInput
    },
    mounted: function () {
      this.$refs.myNumberInput.destroy();
    }
  }
</script>

Focuses the widget.

<template>
  <JqxNumberInput ref="myNumberInput"
   
  />
</template>
 
<script>
  import JqxNumberInput from 'jqwidgets-scripts/jqwidgets-vue/vue_jqxnumberinput.vue';
 
  export default {
    components: {
      JqxNumberInput
    },
    mounted: function () {
      this.$refs.myNumberInput.focus();
    }
  }
</script>

Gets the value.

<template>
  <JqxNumberInput ref="myNumberInput"
   
  />
</template>
 
<script>
  import JqxNumberInput from 'jqwidgets-scripts/jqwidgets-vue/vue_jqxnumberinput.vue';
 
  export default {
    components: {
      JqxNumberInput
    },
    mounted: function () {
      this.$refs.myNumberInput.decimal = 200;
      const value = this.$refs.myNumberInput.getDecimal();
    }
  }
</script>

Sets the value.

<template>
  <JqxNumberInput ref="myNumberInput"
   
  />
</template>
 
<script>
  import JqxNumberInput from 'jqwidgets-scripts/jqwidgets-vue/vue_jqxnumberinput.vue';
 
  export default {
    components: {
      JqxNumberInput
    },
    mounted: function () {
      this.$refs.myNumberInput.setDecimal(200);
    }
  }
</script>

Sets or gets the value.

<template>
  <JqxNumberInput ref="myNumberInput"
   
  />
</template>
 
<script>
  import JqxNumberInput from 'jqwidgets-scripts/jqwidgets-vue/vue_jqxnumberinput.vue';
 
  export default {
    components: {
      JqxNumberInput
    },
    mounted: function () {
      const value = this.$refs.myNumberInput.val();
    }
  }
</script>