typescript - 为什么即使我能够获得对要滚动到的元素的引用，scrollIntoView 在 Vue 3 中也不起作用

Question

我有一个 Vue 3 组件，我正在尝试将其设置为单页应用程序的导航。当用户单击某个项目时，我希望页面滚动到包含该部分内容的元素。
奇怪的是，我可以使用 document.querySelector 获得对 div 的引用。 .我可以将 div 记录到控制台，但是当我尝试在 div 上调用 scrollIntoView 时，它不会执行任何操作，除非我包装了 element.scrollIntoView在 setTimeout功能。
我确定这与 Vue 组件生命周期有关。我试过将我的代码包装在 onMounted 中功能，这只会让我的 scrollPageTo功能超出范围。

<template>
    <div id="navigation-view" class="navigation-bar bg-gradient-to-tr w-full mx-auto flex items-start py-4">
        <div class="w-full mx-auto text-right">
                <nav>
                    <a class="top-nav-item" href="#" v-on:click="scrollPageTo('home-view')">
                        <i class="fa fa-home fa-lg"></i> Home
                    </a>

                    <a class="top-nav-item" href="#" v-on:click="scrollPageTo('hello-view')">
                        <i class="fa fa-hands-helping fa-lg"></i> Hello
                    </a>

                    <a class="top-nav-item" href="#" v-on:click="scrollPageTo('contact-view')">
                        <i class="fa fa-envelope fa-lg"></i> Contact
                    </a>
                </nav>
        </div>
    </div>
    <div class="logo">
        <img src="/assets/img/615io-logo-wbg.png" alt="615io logo">
    </div>
</template>
<script lang="ts">
import {defineComponent, onMounted} from "vue";
export default defineComponent({
    setup() {

        const scrollPageTo = (navEl) => {
            console.log(`#${navEl}`);
            let element = document.querySelector(`#${navEl}`);
            console.log(element);
            element.scrollIntoView({behavior: 'smooth'});
        }

        return {
            scrollPageTo,
        }


    }
});
</script>

Answer 1

添加 prevent单击事件的修饰符，因为此修饰符阻止了导航到 # 的默认行为。 :

v-on:click.prevent="scrollPageTo('home-view')"

LIVE DEMO