Vue.js：v-for後のイベント

Question

Vue.jsで簡単なチャットアプリを構築しようとしています。私の問題は、新しいメッセージが書き込まれるときにメッセージ領域が下にスクロールする必要があるということです。

私はv-for指示文でメッセージをループします。 v-forがDOMを更新したときにイベントがありますか？

メッセージ領域divがコンポーネントのメッセージ配列をリッスンするようにしました。私は、配列にメッセージを追加しているのと同じ関数で、メッセージ領域のdivのscrollTopを99999に設定しようとしました。しかし、問題はv-forがDOMを更新していないため、スクロールできません正しい点。

Answer 1

watchを試しましたか？

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

編集：このソリューションは、DOMが更新されていることを確認するためにnextTick機能を使用する必要として、他の回答を参照してください。

Answer 2

私は同様の問題がありましたが、私はvue.nextTick()を使って別のアプローチをとっていました。 v-forがレンダリングを完了したことを確認する必要がありました。コンポーネントがすぐに再レンダリングされないため、キューが空のときに次の「ティック」で更新されます。

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