如何使用带有挂载钩子的 scrollIntoView()答案

【问题标题】：How can I use scrollIntoView() with mounted hook如何使用带有挂载钩子的 scrollIntoView()
【发布时间】：2020-02-20 02:58:45
【问题描述】：

我有一个 Vue 组件，并且模板有一些 div 元素、一些图像和一个从 Laravel 6.0 传递过来的 User 对象，在我尝试将 scrollIntoView() 与 mount() 函数一起使用之前，一切似乎都正常工作。据我所知，页面在完全加载之前正在尝试 scrollIntoView() 。如果我将用户对象限制为小尺寸（只有 2 个用户），一切正常。但是，如果有更多数据，它就不会像应有的那样滚动查看。如果我使用设置的超时功能，它确实有效，但它看起来很老套而且不专业。

我只想在视图安装/加载后滚动到一个 div（标题）。 div 是页面上的第一个 div，没有图像（如果这很重要）。谁能帮我解决这个问题？我已经看到mounted功能只适用于虚拟DOM？如果是这样，我们可以在 Vue 中使用什么更像 JQuery $(document).ready() 但针对特定组件并应用于实际 DOM？

  mounted() {       
    var elmnt = document.getElementById("move-to-header");
    elmnt.scrollIntoView(true);
    }
  }

【问题讨论】：

当调用挂载时，组件应该被加载和渲染。是否有任何类型的异步代码加载数据？
您是否根据用户对象的数量创建新组件？如果是这样，您可能会创建相同的挂载函数实例。解决方案是将代码提取粘贴到父组件中。（您基本上想要滚动一次，而不是用户数量的多次）。如果回答不充分，能否提供更多代码？
好的，感谢您的想法，可能是异步代码加载搞砸了。我将代码从挂载移动到我的 axios（异步代码）请求的回调函数，它似乎正在工作。感谢您抽出宝贵时间回复。

标签： javascript vuejs2 laravel-6

【解决方案1】：

我通过使用我的 axios 请求的回调函数让它工作了。然而，我确实需要将它包装在一个没有指定毫秒数的 setTimeout 函数中，但总的来说它可以正常工作。

  get_user(the_name) {
      axios
        .post("/get_users", { the_name: the_name})
        .then(response => {
           this.display_user(response.data);
           setTimeout(() => {
             var elmnt = document.getElementById("move-to-header");
             elmnt.scrollIntoView();
   })

【讨论】：