I created a dynamic form using Vue 3 that consists of five input text fields. Each input field should only accept a single-digit number. When a user enters a number in an input field, the focus should automatically move to the next input field. After filling in all the input fields, the form should be submitted. In the HandleInput function, I want to access each input field in order to set the focus to the next input field, submit the form, and access the value of each input field. However, I am currently encountering an issue where 'this.$refs' is undefined.
Please provide a solution to access the input fields to achieve the desired functionality.
setup() {
const inputs= ref(["", "", "", "", ""])
const handleInput = (index) => {
if ( index < inputs.value.length - 1) {
//Error:
this.$refs['input' + (index + 1)][0].focus();
console.log(inputs.value[index])
}
}
return {
inputs,
handleInput
}
}
<div v-for="(input, index) in inputs" :key="index">
<input
type="text"
v-model="input"
@input="handleInput(index)"
:ref="'input' + index"
maxlength="1"
pattern="[0-9]"/>
</div>
this.$refsto contain?