I'm working on a project that involves Vue.js and Quasar.
One of the requirements is an input field initialized with 10 zeros, only allowing numeric numbers. The catch is that when adding a number, it should fill in from behind.
"0000000000" -> add 1
"0000000001" -> add 2
"0000000012" -> add 5
"0000000125" -> delete the last character
"0000000012" -> add 3
"0000000123"
Do you have any ideas on how I can achieve this functionality? Here's what I have coded so far:
<template>
<div>
<q-input class="input" v-model="number" outlined label="number" mask="##########" minLength="10" maxlength="10" @input="onInput"/>
</div>
</template>
<script>
import { ref } from 'vue'
export default {
setup() {
const number = ref("0000000000")
}
return {
number
}
}
</script>
The current onInput function doesn't have any behavior defined yet.