VueJS Components using scrollIntoView()

The problem is that scrollIntoView is called before the tab is rendered on the page because renders are asynchronous. Essentially, when you call

this.activeTab = 'Solution Details';

Vue does not immediately render the page, it just queues a render. However immediately after that you tell Vue to look for the rendered element and scroll to it. It's not there yet.

I think my first stab at solving this would be to use $nextTick.

this.$nextTick(() => this.$refs.solutionDetails.showCurrent(command))

That should wait for the render that needs to happen to occur before you attempt to scroll into view.

Actually you have to reference the element in the component. Something like this for example:

this.$refs.[ref name here].$el.scrollIntoView({ behavior: 'smooth' });

1: Give the element you want a ref name. Inside the function on the parent element , it's better to try to console.log(this.$refs.[ref_name]) to check which part will have the effect. It is not always the parent element. Really depends on your CSS structure. When submit the form and get error message, then the view go to the part you want.

if(this.errorMessage) {    this.$refs.[ref_name].scrollIntoView();}

2: For Vue.JS Multi Steps FormIt is normal to use step for process like signup.What we have now is the view will stay the same as the first step.For example, if step one form is quite long with scrolling then go to step two the view will stay at the bottom.What we can do here to keep the view on the top:Give the top element a ref name like ref="top".In all the steps submit functions, just add this to keep the next page on the top:

this.$refs.top.scrollIntoView();