NumericTextBox Overview
The NumericTextBox enables the user to edit and submit specific numeric values by typing or by using the spin buttons.
It converts an <input> element into a numeric, percentage, or currency textbox. The conversion data type depends on the specific format. The component renders spin buttons which increase or decrease its value with a predefined step. The NumericTextBox accepts only numeric entries and uses the kendo.culture.current culture to determine the number precision and other culture-specific properties. When the NumericTextBox initializes, it wraps the <input> element with a <span></span> tag and renders Spin buttons.
The NumericTextBox wrapper for Vue is a client-side wrapper for Kendo UI NumericTextBox widget.
Basic Usage
The following example demonstrates the NumericTextBox in action.
<div id="vueapp" class="vue-app">
<kendo-numerictextbox v-model="number"
:decimals="3"
:format="'c0'"
:min="0"
:max="1000"
:round="false"
:spinners="true">
</kendo-numerictextbox>
</div>Vue.use(InputsInstaller);
new Vue({
el: "#vueapp",
data () {
return {
number: 17
}
}
})Features and Functionalities
Events
The following example demonstrates basic NumericTextBox events. You can subscribe to all NumericTextBox events by the handler name.
<div id="vueapp" class="vue-app">
<kendo-numerictextbox v-on:change="onChange"></kendo-numerictextbox>
</div>Vue.use(InputsInstaller);
new Vue({
el: "#vueapp",
methods: {
onChange (e) {
var value = e.sender.value();
console.log(value);
}
}
})