データがレンダリングされると、Vuejsイベントが発生する

Question

vuejsでは、2人のユーザー間で会話チャットを作成しています。私はチャットコンポーネントは、チャットの構造（ブートストラップでパネルを）持っているこの

Chat 
    ->ChatLog 
     -> ChatMessage 
    ->ChatComposer 

のようなコンポーネントを入れ子にしていると私はAxiosで取得どこにもそのページは、データベースから、すべてのメッセージをロードされたときに、です。

axios 
.get('/conversation/'+this.conversation.id+'/message') 
.then((response) => { 
    this.messages = response.data; 
    this.manageHeightChat(); 
    this.scrollToEnd(); 
}); 

そして、ときに私はすべてのメッセージを取得し、私はChatMessageコンポーネントに各メッセージをディスパッチChatLogコンポーネント

<chat-message v-for="message in messages" v-bind:message="message" v-bind:user="user"></chat-message> 

にそれらを派遣。

したがって、すべてのメッセージでコールバックメソッドが呼び出されると、それらは他のコンポーネントにディスパッチされ、次に2つのメソッドmanageHeightChatとscrollToEndが呼び出されます。

scrollToEnd() { 
    var container = this.$refs.chatlog; 
    container.scrollTop = container.scrollHeight; 
    console.log(container.scrollHeight); 
} 

問題は、メッセージがChatLogとChatMessageによってレンダリングされる前に、最後の方法（scrollToEndが）のでcontainer.scrollHeightは良い大きさではないと呼ばれているということです。それを確認するために

私のようなものを追加しました：

setTimeout(function() { 
    this.scrollToEnd(); 
}.bind(this), 1000); 

そして、すべてが正常に働いていたが。

チャットにコンテンツがレンダリングされ、私がscrollToEndメソッドを呼び出すことができるようにするには、どのようにイベントを入れますか？

Answer 1

nextTickを参照してください。メッセージデータを設定するときは、VueがDOMを更新するのを待つ必要があります。それはnextTickが対象です。あなたと同じように使用してください。setTimeout

axios 
.get('/conversation/'+this.conversation.id+'/message') 
.then((response) => { 
    this.messages = response.data; 
    this.manageHeightChat(); 
    this.$nextTick(this.scrollToEnd.bind(this)); 
});