Vue.jsでは、AJAX呼び出しを含め、ビュー全体がレンダリングされたことをどのように知ることができますか？

Question

Vue.js API documentationによると、の内部にはmounted()が表示されますが、この場合はレンダリング全体がどのように表示されるかはわかりません。

私はintro.jsライブラリイントロVue.jsを統合しようとしていますが、次のようにnextTickの内部introJs().start()を入れて、私が使用している場合：DOMはまだ完全に準備ができていないとintroJsが失敗したようにそれはそう

mounted: function() { 
    this.$nextTick(function() { 
    // Code that supposedly will run only after the 
    // entire view has been rendered 
     introJs().start() 
    }) 
} 

すべてのイントロステップを正常に表示します。

Reproduction link

どのように私はすべてが本当に準備ができていることを知ることができますか？ Vue.js内でintroJを起動する他の方法はありますか？

Answer 1

問題はv-ifを使用していることです。条件がfalseの場合、html要素はドキュメントにはなく、introjsはそれを見つけることができません。ブラウザの開発ツールで、v-ifの条件がfalseのときにコンポーネントを見ると、htmlコメント<!-- -->が表示されます。

簡単な修正はv-showです。 v-showはdisplayのcssプロパティをトグルするので、この方法では、要素がドキュメント内にあり、イントロはそれを見つけることができ、ユーザーはまだそれを見ません。