Vue.js: evento dopo che v-for è fatto

Question

Sto provando a creare una semplice app di chat con Vue.js. Il mio problema è che l'area del messaggio deve scorrere verso il basso quando viene scritto un nuovo messaggio.

I looping dei messaggi con direttiva v-for. C'è un evento quando v-for ha aggiornato il DOM?

Ho fatto in modo che l'area messaggi div divenga in ascolto. Ho provato a fare in modo che nella stessa funzione che sto aggiungendo il messaggio all'array, impostare l'scrollotop dell'area div del messaggio su 99999. Ma il problema è che v-for non ha fatto l'aggiornamento del DOM, quindi non scorrerà fino a il punto corretto.

Answer 1

Hai provato a utilizzare watch?

var vm = new Vue({ 
    data: { 
    messages: [] 
    }, 
    watch: { 
    'messages': function (val, oldVal) { 
     //Scroll to bottom 
    }, 
    } 
}) 

Edit: Si prega di vedere l'altra risposta, in quanto questa soluzione richiede l'utilizzo della funzione nextTick per garantire il DOM viene aggiornato.

Answer 2

Avevo un problema simile ma ho adottato un approccio diverso utilizzando vue.nextTick(). Avevo bisogno di essere sicuro che il v-for avesse finito il rendering poiché il componente non sarebbe stato ri-renderizzato immediatamente, Si aggiornerà al prossimo "segno di spunta" quando la coda è vuota.

Vue.component('message', { 
    data() { 
    return { 
     message: [] 
    } 
    }, 
    methods: { 
    updateMessageArray(newMessage) { 
     this.message.push(newMessage); 

     this.$nextTick(() => { 
     // Scroll Down 
     }) 
    } 
    } 
}) 

https://vuejs.org/v2/api/#Vue-nextTick

https://vuejs.org/v2/guide/reactivity.html#Async-Update-Queue