vue-chat-scroll 不滚动到列表中的最后一条消息

Question

我的 vue app.The 消息中有一个聊天功能被加载到列表中，如下所示。

        <div class="chat">
          <ul v-chat-scroll>
              <li 
              v-for="message in messages" 
              :key="message.id"
              :class="message.from == 'a' ?  'message-card-left' : 'message-card-right'"
              >
              <Card class="message-card">
                  <template slot="content">
                  {{message.message}}
                  </template>
                  <template class="message-time" slot="footer">
                  {{message.time}}
                  </template>
              </Card>
              </li>
          </ul>
        </div>

消息变量如下所示：

  messages: [
              {
                id: 1,
                from: 'a',
                to: 'b',
                message:'time',
                time: '1:00'
              },
              {
                id: 2,
                from: 'b',
                to: 'a',
                message:'time',
                time: '1:00'
              },
            ]

为了便于阅读，我删除了其他对象。我希望 v-chat-scroll 将聊天 window 滚动到最后一条消息。我也在这段代码中使用 primeVue 。任何帮助，将不胜感激。谢谢。

Answer 1

我找到问题了。 v-chat-scroll 指令应该在 ul 上，在我的例子中 class .chat 使聊天能够滚动。所以下面的代码解决了这个问题：

<div>
      <ul class="chat" v-chat-scroll>
          <li 
          v-for="message in messages" 
          :key="message.id"
          :class="message.from == 'a' ?  'message-card-left' : 'message-card-right'"
          >
          <Card class="message-card">
              <template slot="content">
              {{message.message}}
              </template>
              <template class="message-time" slot="footer">
              {{message.time}}
              </template>
          </Card>
          </li>
      </ul>
    </div>

vue-chat-scroll 不滚动到列表中的最后一条消息

vue-chat-scroll not scrolling to the last message in the list

vue.js

primevue