Task
I am facing a challenge with a long list of elements in a v-for loop. My goal is to trigger the .focus() method on the next element when the user presses the "arrow-down" key.
My Attempt
<script setup>
import { ref } from 'vue'
const htmlElements = ref([])
const elements = Array.from({ length: 5_000 }, (_, i) => ({ text: 'Element'+ i }))
</script>
<template>
<p v-for="el of elements" ref="htmlElements">{{ el.text }}</p>
</template>
I have a lengthy list of elements and I maintain a record of their corresponding DOM elements from the v-for loop for triggering focus (details not included for simplicity).
Issue
The use of ref="htmlElements" is causing a significant performance bottleneck. While directly accessing the DOM elements through the native childNodes property seems faster, it also appears fragile (involving filtering out unwanted #text nodes).
Query
How can I efficiently and Vue-compliantly invoke the focus function on the child nodes?