Vuejs有新消息时如何滚动到最新消息

<template>
  <div>
    <div v-for="(message, index) in messages" :key="index">
      {{ message }}
    </div>
  </div>
</template>

export default {
  data() {
    return {
      messages: [], // 消息列表
      latestMessageIndex: -1 // 当前最新消息的索引
    };
  },
  mounted() {
    // 监听新消息的到达，例如通过WebSocket或其他方式
    // 当有新消息时，将消息添加到消息列表中，并更新最新消息的索引
    this.addNewMessage("新消息内容");
  },
  methods: {
    addNewMessage(message) {
      this.messages.push(message);
      this.latestMessageIndex = this.messages.length - 1;
    }
  }
};

export default {
  mounted() {
    // ...
    this.scrollToLatestMessage();
  },
  methods: {
    scrollToLatestMessage() {
      // 使用DOM操作滚动到最新消息
      const container = this.$el; // 获取消息容器的DOM元素
      const latestMessage = container.children[this.latestMessageIndex]; // 获取最新消息的DOM元素
      latestMessage.scrollIntoView(); // 滚动到最新消息
    }
  }
};