I've been grappling with the challenge of migrating Vue2 to Vue3 Composition API using Typescript. Refs don't seem to function in the same way, leaving me unsure of how to make them work in Vue3. It used to be so simple in Vue 2 with a code snippet like
this.$refs[docForm.value.fields[i].name][0].focus()The approach outlined in the Docs where you just add the ref on the v-for loop and access it by index doesn't quite fit my scenario. The issue is that I only have the field name at hand when I need to access it, not the index position (it's a long story).
<div v-for="(p, i) in docForm.pages">
<div v-for="(f, i) in p.fields">
<input type="text" :name="f.name" :ref="f.name" />
</div>
</div>
const goToNextEmptyField = (): void => {
if (docForm.value) {
for (var i = 0; i < docForm.value.fields.length; i++) {
if (docForm.value.fields[i].value == null || docForm.value.fields[i].value == '') {
refs[docForm.value.fields[i].name][0].focus() //THIS LINE NEEDS FIXING - WORKED IN Vue2
return
}
}
}
}
This is the simplified structure of the docForm object:
export interface DocForm {
pages: DocFormPageModel[]
fields: DocFieldModel[]
}
export interface DocFormPageModel {
fields: DocFormField[]
...
}
export interface DocFieldModel {
name: string
....
}