document.getElementById is undefined in Vue2 component...because misusing watch? - html

Question

I am making a basic chat component that loads messages from firebase into a div.
Goal is to auto-scroll to the bottom of the div WHEN relevantMessages changes, IF the current scroll location is already near
the bottom.
I tried to do this by adding a watcher to relevantMessages that calls a 'scrollToBottom' `method.
Problem is: Error in callback for watcher "relevantMessages":
"TypeError: Cannot read property 'scrollTop' of undefined"
HTML:
<template>
<div class="all">
<div class="chat-header">
...
</div>
<div class="messages-area" id="messages-area-id" ref="messagesAreaRef">
<div
v-for="(thing, index) in relevantMessages"
:key="index"
class="message-row"
>
<div class="message">
<span>{{thing.content}}</span>
<span>{{thing.timeStamp}}</span>
</div>
</div>
</div>
<div class="input-area">
...
</div>
</template>
The JS:
<script>
import firebase from "firebase";
export default {
data() {
return {
relevantMessages: Object,
partnerObj: null
};
},
computed: {
...
},
props: {
...
},
mounted: function() {
this.getMessages();
this.getPartner();
},
watch: {
relevantMessages: function() {
this.scrollToBottom();
}
},
methods: {
getMessages: function() {
var that = this;
firebase
.database()
.ref("/messages/" + that.conversationUID)
.on("value", function(messages) {
var result = messages.val();
that.relevantMessages = result;
});
console.log("getting posts");
},
sendMessage: function() {
...
},
scrollToBottom: function() {
var messagesArea = this.$refs.messagesAreaRef;
// var messagesArea = document.getElementById("messages-area-id");
var currentScrollPos = messagesArea.scrollTop;
// console.log(currentScrollPos);
var totalDivHeight = messagesArea.scrollHeight;
if (currentScrollPos <= totalDivHeight - 100) {
messagesArea.scrollTop(totalDivHeight);
}
}
}
};
The errors themselves:
vue.runtime.esm.js?2b0e:619 [Vue warn]: Error in callback for watcher "relevantMessages": "TypeError: Cannot read property 'scrollTop' of undefined"
TypeError: Cannot read property 'scrollTop' of undefined

Answer 1

Perhaps the component itself is not yet mounted at this time. So all $refs are undefined. Try out the alternative syntax of watch (Documentation) in mounted(). Hope that helps!

Answer 2

There are a few issues with your implementation:
relevantMessages: Object,
Object does not seem to be a valid initial value for relevantMessages. You should set this to either an empty object ({}) or an empty array ([]).
messagesArea.scrollTop(totalDivHeight);
scrollTop is not a function, it should be used like messagesArea.scrollTop = totalDivHeight.
Your implementation for scrolling to the bottom is incorrect; currentScrollPos will always be less than the height of its container if it's near the top. To check if it's near the bottom, you should have currentScrollPos >= totalDivHeight - messagesArea.clientHeight - 100
Now, even with the above changes, it appears the watcher will run and execute before Vue has a chance to actually re-render and update the DOM (thus, the scrolling will always be one node behind), so you must call your scrollToBottom after the "next tick":
watch: {
relevantMessages() {
this.$nextTick(this.scrollToBottom);
}
},
I created a working example in CodeSandbox here: https://codesandbox.io/embed/vue-template-tqo4k.