vue中机器人聊天代码怎么能够聊天置底

要实现机器人聊天置底，可以考虑使用 Vue.js 的组件和状态管理。

首先，你可以创建一个聊天消息列表的组件，这个组件会接收聊天记录的数组作为 props，并且将数组中的每一条消息渲染成对话框。

然后，你可以使用 Vuex 来管理聊天记录的状态。当用户发送一条消息时，你可以将这条消息添加到聊天记录数组中，然后在组件中监听这个数组的变化，使得聊天记录始终展示在列表的底部。

最后，你可以使用 Vue.js 的生命周期钩子函数来实现自动滚动到聊天记录的底部。在组件渲染完成后，你可以获取到聊天记录列表的 DOM 元素，并且将其滚动到底部。

下面是一个简单的实现示例：

<template>
  <div class="chat-container" ref="chatContainer">
    <div v-for="message in messages" :key="message.id" class="chat-message">
      {{ message.content }}
    </div>
  </div>
</template>

<script>
import { mapState } from 'vuex';

export default {
  computed: {
    ...mapState(['messages']),
  },
  mounted() {
    this.scrollToBottom();
  },
  watch: {
    messages() {
      this.$nextTick(() => {
        this.scrollToBottom();
      });
    },
  },
  methods: {
    scrollToBottom() {
      const container = this.$refs.chatContainer;
      container.scrollTop = container.scrollHeight;
    },
  },
};
</script>

<style>
.chat-container {
  height: 400px;
  overflow-y: scroll;
}
</style>

在这个示例中，我们创建了一个聊天消息列表的组件，并且使用了 Vuex 来管理聊天记录的状态。在组件中，我们监听了 messages 数组的变化，并且使用 `this.$nextTick()` 来确保滚动操作在 DOM 更新之后进行。

最后，我们使用了 `ref` 来获取到聊天记录列表的 DOM 元素，并且使用 `scrollTop` 和 `scrollHeight` 来实现滚动到底部的效果。