CODEWITHSUNDEEP
vue.js
Nomi
Nomi

Reputation: 760

ScrollTo invalid input in VueJs

Is there any way that I can scrollTo first input which have invalid class using VueJs. Right now I am using window.scrollTo(500, 0); which is obviously not a proper solution.

Upvotes: 0

Views: 2962

Answers (3)

Adam Taylor
Adam Taylor

Reputation: 4839

You'll probably need to use Vue.nextTick to wait for Vue to apply your invalid class everywhere it needs to be applied.

this.$nextTick(() => {
  let domRect = document.querySelector('.error').getBoundingClientRect();
  window.scrollTo(
    domRect.left + document.documentElement.scrollLeft,
    domRect.top + document.documentElement.scrollTop
  );
});

Upvotes: 5

Maryna Zinchenko
Maryna Zinchenko

Reputation: 1

One more way :)

this.$nextTick(() => {
 document.querySelector('.error').scrollIntoView({block: "center", behavior: "smooth"})
});

Upvotes: 0

Bogdan Kuštan
Bogdan Kuštan

Reputation: 5577

Just get first elements with error position:

window.scrollTo(document.querySelector('.error').offsetTop, 0);

Upvotes: 1

Related Questions