How to listen the contents of div is being updated in vue?

Question

I have a list created by v-for and wrapped by md-scrollbar.

<md-content class="md-scrollbar"> <div v-for="(msg, index) of list" :key="index"> {{msg}} </div> </md-content>

After list changed, I wish the scrollbar scroll to the bottom. So need to listen to element updated event or the scrollbar scrollHeight changed event. How to listen to certain DOM element's property is changed?

BTW I can't move the scroll after list changed logic because the new element hasn't been rendered at that moment yet, the height of md-scrollbar didn't update.

tony19 · Accepted Answer · 2022-07-16 01:51:40Z

1

Since you need the updated dom, you could use Vue.nextTick (after list data update) :

Vue.nextTick(function () { // DOM updated })

edited Jul 16, 2022 at 1:51

tony19

140k23 gold badges281 silver badges354 bronze badges

answered Feb 7, 2018 at 9:35

soju

25.4k3 gold badges70 silver badges71 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

JustWe Over a year ago

btw. in my case using in .vue, shall be this.$nextTick(...)

tony19 · Accepted Answer · 2022-07-16 04:57:56Z

use watch to watch list and react accordingly

e.g.

var vm = new Vue({ data: { c: { b: 2 }, }, watch: { c: { handler: function(val, oldVal) { window.scrollTo(0,document.body.scrollHeight); }, deep: true } } });

Collectives™ on Stack Overflow

How to listen the contents of div is being updated in vue?

2 Answers 2

1 Comment

Comments

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

1 Comment

Comments

Related