This app is designed with a simple v-text-field for user input. The issue I am facing is that when I enter a combination of numbers and letters like 11a, then quickly tab out or click out of the input field before losing focus, it only shows 11. However, once the focus is lost completely, it displays the entire text including the letter. I'm not sure why the last symbol is being restored in this way and how to fix it. Can someone help me identify what mistake I am making?
<div id="app">
<h1>{{message}}</h1>
<v-text-field @input.native="setOnlyNumber" />
</div>
</template>
<script>
export default {
data() {
return {
message: 'Welcome to Vue!'
};
},
methods: {
setOnlyNumber(e) {
e.target.value = e.target.value.replace(/\D+/, '');
}
}
};
</script>