vue-chat-scroll не прокручивается до последнего сообщения в списке

Question

У меня есть функция чата в моем vue Сообщение загружается в список, как показано ниже.

        <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для прокрутки окна чата до последнего сообщения. Я используюprimeVueв этом коде тоже. Любая помощь будет оценена. Спасибо.

Answer 1

Я понял проблему. Вv-chat-scroll директива должна быть на ul с классом .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>