En el siguiente caso hay dos listas, una anidada dentro de la otra.

 <q-list> <q-item v-for="item in data" :key="item.id_data" :id="item.id_data" > <q-item-section> <div> <span {{ item.name }} </span> <q-item v-for="stuff in item" :key="stuff.id_stuff" :id="stuff.id_stuff"> <q-item-section> <span"> {{ stuff.name }} </span> </q-item-section> </q-item> </div> </q-item-section> </q-item> </q-list>

Se pueden desencadenar dos eventos de clic que generaron un desplazamiento a un elemento de las listas:

1- En el primer caso, el scroll debe hacerse por el elemento al que le corresponde el id item.id_data

2- En el segundo caso, el scroll debe hacerse por el elemento al que le corresponde el id stuff.id_stuff

Esto significa que el valor de identificación de datos puede coincidir con el valor de identificación de material (es decir, item.id_data = 4 , stuff.id_stuff = 4 ).

Esto causa problemas al usar document.getElementById(id).

Ejemplo de la función scrollTo:

 scrollTo (id) { const ele = document.getElementById(id) const target = getScrollTarget(ele) const offset = ele.offsetTop - ele.scrollHeight const duration = 500 setScrollPosition(target, offset, duration) },

como solucionar esto?