0

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>

4
  • what do you expect this.$refs to contain? Commented Oct 29, 2023 at 10:37
  • Sorry. I know that I mixed up some concept between Vue 2 and 3. But I can find how to solve it. I appreciate you if you could help me. Commented Oct 29, 2023 at 10:56
  • My point is, what did you expect it to contain - I was not pointing out the obvious Commented Oct 29, 2023 at 21:18
  • vuejs.org/guide/essentials/template-refs#refs-inside-v-for sfx syntax it's pretty simple even it is not the exact answer to this question Commented Jun 25, 2024 at 14:14

0

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Start asking to get answers

Find the answer to your question by asking.

Ask question

Explore related questions

See similar questions with these tags.