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

Question

I have a Vue component and the template has some div elements, a few images and a User object passed over from Laravel 6.0 Everything seems to work just fine until I try to use scrollIntoView() with the mounted() function.From what I can tell the page is trying to scrollIntoView() before it is completely loaded. If I limit the user object to a small size (just 2 users) everything works fine. But if there is more data it does not scroll to view like it should. It does work if I use a set timeout function but it looks hackey and not professional.

I just want to scroll to a div (the header) after view is mounted/loaded. The div is the first div on the page and has no images (if that even matters). Can anyone help me to solve this? I have seen that the mounted function only applies to the virtual DOM? If so what can we use in Vue that is more like JQuery $(document).ready() but for the specific component and applies to the actual DOM?

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

Answer 1

I got it working by using the callback function of my axios request. I did however need to wrap it in a setTimeout function with no specified number of milliseconds but overall it is working without errors.

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