scrollTop funktioniert nicht nach Axios Antwort

Question

Ich habe ein Problem bei der Erstellung eines Echtzeit-Chat mit Laravel (mit Vue.js, Pusher, Echo). Hier habe ich drei Methoden:

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); 
     }); 

    } 
}` 

Nach diesen Methoden, die ich brauche, um meine <div id="chat"> nach unten zu scrollen. Ich habe versucht, eine Menge von Optionen wie: document.getElementById('chat').scrollTop=9999

Das gleiche mit jQuery $('#chat')...,

Einige Plugins wie vue-scroll-chat und gleiche für jQuery, aber keiner von ihnen arbeitete. Dieser Befehl funktioniert nicht in Methoden fetchMessages und addMessage und ...

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

funktioniert nicht. Wie kann ich es reparieren?

Answer 1

Ich denke, dass Sie die document.getElementById('chat').scrollTop=9999; zu einem Vue.$nextTick hinzufügen müssen, damit die Information Zeit hat, das Element zu erscheinen und zu bewirken, bevor der Rolleffekt betätigt wird.

Sie können auch eine ref="chat" zu Ihrem Chat-Element hinzufügen, so dass Sie über die vue-Referenz auf scrollTop verweisen können; es würde in etwa so aussehen

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