Is there a way to access previous and current data in the updated lifecycle hook in Vue, similar to React? I want to be able to scroll a list of elements to the very bottom, but for this I need:
- The already rendered updated DOM (to calculate the scroll)
- Information on whether to scroll or not (scroll only if the number of current elements is larger than the previous).
I came up with something like this:
name: "list",
props: ["elements"],
data() {
return {
scrollBottom: false
};
},
updated() {
if (this.scrollBottom) {
window.scroll(0, this.$root.$el.scrollHeight); /* full window / app height list*/
}
},
watch: {
elements(current, prev) {
this.scrollBottom = current.length > prev.length;
}
}
I'm uncertain if this is the correct approach, as Vue lifecycle hooks do not provide any information about previous data. Is there a better way to handle this situation? Thank you for any assistance.
EDIT I came across this informative topic which suggests using the link. Apparently, the recommended method to address this issue is by utilizing the this.$nextTick method.