我怎样才能使用 scrollIntoView() 挂钩

Question

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

我只想在视图 mounted/loaded 之后滚动到 div（header）。 div 是页面上的第一个 div，没有图像（如果这很重要的话）。谁能帮我解决这个问题？我看到mounted函数只适用于virtualDOM？如果是这样，我们可以在 Vue 中使用什么更像 JQuery $(document).ready() 但针对特定组件并适用于实际的 DOM?

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

Answer 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();
   })

我怎样才能使用 scrollIntoView() 挂钩

How can I use scrollIntoView() with mounted hook

javascript

vuejs2

laravel-6