We use cookies to give you the best experience on our website. If you continue to browse, then you agree to our privacy policy and cookie policy.
|
buttonClick: function(useGrouping) {
if (useGrouping) {
this.$refs.numeric.ej2Instances.format = "#,###.##";
this.$refs.numeric.ej2Instances.dataBind();
} else {
this.$refs.numeric.ej2Instances.format = "#.##";
this.$refs.numeric.ej2Instances.dataBind();
}
console.log("updated", this.$refs.numeric.getText());
this.$nextTick(function() {
// the value of getText() does not yet match the updated format pattern
console.log("text in nextTick:", this.$refs.numeric.getText());
});
const that = this;
setTimeout(function() {
// only here in setTimeout the value from getText() matches the updated format pattern
console.log("text in setTimeout:", that.$refs.numeric.getText());
}, 0);
} |
|
<template>
<div id="app">
<ejs-numerictextbox
ref="numeric"
:value="value"
:format="format"
></ejs-numerictextbox>
<input
type="button"
value="format with grouping "
v-on:click="buttonClick(true)"
/>
<input
type="button"
value="format without grouping"
v-on:click="buttonClick(false)"
/>
</div>
</template>
<script>
import Vue from "vue";
import { NumericTextBoxPlugin } from "@syncfusion/ej2-vue-inputs";
Vue.use(NumericTextBoxPlugin);
export default {
data() {
return {
value: 4711,
format: "####"
};
},
methods: {
buttonClick: function(useGrouping) {
if (useGrouping) {
this.format = "#,###.##";
this.$refs.numeric.dataBind();
} else {
this.format = "#.##";
this.$refs.numeric.dataBind();
}
console.log("updated", this.$refs.numeric.getText());
this.$nextTick(function() {
// the value of getText() does not yet match the updated format pattern
console.log("text in nextTick:", this.$refs.numeric.getText());
});
const that = this;
setTimeout(function() {
// only here in setTimeout the value from getText() matches the updated format pattern
console.log("text in setTimeout:", that.$refs.numeric.getText());
}, 0);
}
}
};
</script>
|
