滚动到同一文档中具有相同id值的两个不同列表中的元素

Question

在下面的例子中，有两个列表，一个嵌套在另一个中。

<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>

可以触发两个点击事件，生成滚动到列表中的元素:

1-在第一种情况下，必须对id所指向的元素进行滚动对应item.id_data

2-在第二种情况下，必须对id所指向的元素进行滚动对应stuff.id_stuff

这意味着数据id值可以匹配物品id值(即item)。id_data =4,东西。id_stuff =4) .

这在使用document.getElementById(id)时会导致问题。

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)
},

如何解决?

Answer 1

您可以为每个ID绑定一个前缀来区分它们:

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