滾動到同一文檔中兩個不同列表中具有相同 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 值可以匹配 stuff id 值（即 item.id_data = 4 ， stuff.id_stuff = 4 ）。

這在使用 document.getElementById(id) 時會導致問題。

滾動到 function 的示例：

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>