CODEWITHSUNDEEP
htmlvue.jsvuetify.js
Alex T
Alex T

Reputation: 3754

Scrolling to bottom of the table with fixed height when adding new items

I have a function that adds new items to the table which has fixed height and set overflow: auto. When adding new items to the table the scroll should immediately go to the bottom of the table, however currently it does not do that. It seems I need to press once again for it to go to the bottom.

 showMore() {
   this.itemsToShow = this.itemsToShow + 6
   var table = this.$refs['list'];
   table.$el.scrollTop = table.$el.scrollHeight 
 },

Here is codepen which shows this behavior, https://codepen.io/pokepim/pen/XWKqBrv items are added to the table but the scroll wont move to the bottom. Clicking on the button second time moves the scroll but it is not the desired behavior (as it should move scroll at the same time when new items are added)

Upvotes: 0

Views: 41

Answers (1)

Yom T.
Yom T.

Reputation: 9180

Do that on the nextTick:

showMore() {
  this.itemsToShow = this.itemsToShow + 6
  var table = this.$refs['list'];

  this.$nextTick(() => {
    table.$el.scrollTop = table.$el.scrollHeight
  }) 
}

Upvotes: 1

Related Questions