I have developed a messaging system using Vue. The latest messages are displayed from bottom to top. I want to automatically scroll to the end of a conversation when it is clicked and all the messages have been loaded via axios.
Conversation Messages Component
methods: {
getOldMessages(conversation_id){
setTimeout(function() {
axios({
method: 'get',
url: this.url,
}).then(function(response) {
//console.log(response.data);
this.messages = response.data;
this.scrollToEnd();
}.bind(this))
.catch(function(error) {
});
}.bind(this))
},
scrollToEnd: function() {
var container = this.$el.querySelector(".single-conversation");
container.scrollTop = container.scrollHeight;
},
}