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

Question

I have a chat feature in my vue app.The message are loaded in a list as the following.

        <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>

The messages variable looks like:

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

I removed the other objects for readability. I want v-chat-scroll to scroll the chat window to the last message. I am using primeVue in this code too. Any help would be appreciated. Thanks.

Answer 1

I have figured out the problem. The v-chat-scroll directive should be on the ul with the class .chat in my case that makes the chats scroll able. So the following code fixed the problem:

<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>