滚动到同一文档中两个不同列表中具有相同 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[=34=进行滚动]

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

这意味着数据id值可以匹配stuff id值（即item.id_data = 4, stuff.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>

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

Scroll to elements from two different lists in the same document that have the same id value

javascript

vue.js

quasar