How can I scroll down in a modal window?

Question

Vue.js

How to make autoscrolling to the very bottom, in a modal window, if the component is loaded via v-if. It does not completely descend in the modal window, but descends to the very bottom of the text itself.
And the second question, if in my real project with such code it doesn’t go down in any way, because there is a loading through the tabs and keep-alive is used. Since the documentation describes about dynamic components.
But in fact, I think that

document.getElementById("conteiner").scrollTop = 300;

should descend to the very bottom if the block height is 300 px and even at 1000 px it does not work
Here is an example of a modal window with autoscrolling https://codesandbox.io/s/2opz6rrnyr

Answer 1

First - no getElementById, put a ref on the element you are interested in.
Secondly, if you need to scroll to the very bottom, you do not need to specify any specific number. The element has a scrollHeight property.
Thirdly, you need to wait until additional content is shown, and only then scroll, i.e., use nextTick:

this.$nextTick(() => {
  const el = this.$refs.container;
  el.scrollTop = el.scrollHeight;
});

About 0 information. What are the tabs where keep-alive is used ... Nothing is clear.
If your window is wrapped in keep-alive, then check this.show and scroll (you can move this code into a separate method so as not to duplicate it) in the activated hook as well.
UPD. https://codesandbox.io/s/vue-template-ow505