I need help implementing a feature that moves the focus to the next field when the enter key is pressed. I've tried the following code, but it's not working as expected. When I added a debugger in the focusNext method inputs[index + 1].focus();, it showed as undefined. Can someone please assist me in finding where I am making a mistake? My project is built with Vue 2.6.12.
<template>
<div>
<v-form :model='user'>
<v-text-field
label='First Name'
@keydown.enter="focusNext"
v-model='user.first_name'>
</v-text-field>
<v-text-field
label='Last Name'
v-model='user.last_name'>
</v-text-field>
<v-select
:items="cities"
attach
item-text='name'
item-value='name'
v-model="user.city"
label="City">
</v-select>
<v-text-field
label='Phone Number'
v-model='user.phone_number'>
</v-text-field>
</v-form>
</div>
</template>
<script>
export default {
methods: {
focusNext(e) {
debugger
const inputs = Array.from(e.target.form.querySelectorAll('input[type="text"]'));
const index = inputs.indexOf(e.target);
if (index < inputs.length) {
inputs[index + 1].focus();
}
}
}
}
</script>
Error Encountered https://i.sstatic.net/nZ2DV.png
Syntax error