Axiosの応答後にscrollTopが機能しない

Question

Laravel（Vue.js、Pusher、Echo）を使用してリアルタイムチャットを作成する際に問題が発生しています。私は一番下に私の<div id="chat">をスクロールする必要があり、これらのメソッドの後

created() { 
    this.fetchMessages(); 
    this.group = $('#group').data('group'); 
    Echo.private('chat.' + this.group) 
     .listen('MessageSent', (e) => { 
      this.messages.push({ 
       text: e.message.text, 
       user: e.user, 
       author: e.user.name, 
       avatar: e.message.avatar 
      }); 
     }); 
}, 

methods: { 
    fetchMessages() { 
     axios.get('/chat/check/' + this.group).then(response => { 
      this.messages = response.data; 

     }); 
    }, 

    addMessage(message) { 
     axios.post('/chat/add', message).then(response => { 
      this.messages.push(response.data); 
     }); 

    } 
}` 

： は、ここで私は3つの方法があります。私のような多くのオプションを試してみました： document.getElementById('chat').scrollTop=9999

同じjQueryの$('#chat')...、jQueryのためのvue-scroll-chatと同じような

いくつかのプラグインを使用して、それらのどれもが働いていません。このコマンドは、メソッドfetchMessagesとaddMessage と...

addMessage(message) { 
     axios.post('/chat/add', message).then(response => { 
      this.messages.push(response.data); 
      document.getElementById('chat').scrollTop=9999; 
     }); 
    } 

が動作しないでは動作しません。どうすれば修正できますか？

Answer 1

Vue.$nextTickにdocument.getElementById('chat').scrollTop=9999;を追加する必要があると思うので、スクロールエフェクトが作動する前に情報が表示され、エフェクトがかかる時間があります。

チャット要素にref="chat"を追加して、vue参照でscrollTopを参照できるようにすることもできます。それはこのようなものになります

addMessage(message) { 
    axios.post('/chat/add', message).then(response => { 
     this.messages.push(response.data) 
     this.$nextTick(
      () => { 
       this.$refs.chat.scrollTop=9999; 
      } 
     ) 
    }) 
}