0

アプリにチャット機能が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このコードでも使用しています。どんな助けでも大歓迎です。ありがとう。

4

1 に答える 1