Vue.jsルーター：コンポーネントの準備が完了したらコードを実行

Question

私はVue.jsと公式のルータを備えたシングルページアプリケーションで作業しています。

ルータを使用してロードするすべてのセクションごとにメニューとコンポーネント（.vueファイル）があります。すべてのコンポーネントでは、私はこれに似たいくつかのコードがあります。私は、コンポーネントが中に移行し終わった後（jQueryプラグインINIT）コードの一部を実行したい

<template> 
    <div> <!-- MY DOM --> </div> 
</template> 

<script> 
    export default { 
     data() {}, 
     methods: {}, 
     route: { 
      activate() {}, 
     }, 
     ready: function(){} 
    } 
</script> 

を私はreadyイベントで私のコードを追加した場合、コンポーネントが初めてロードされたときにのみ起動されます。 route.activateでコードを追加すると良いですが、DOMはまだロードされていないので、私のjQueryプラグインを初期化することはできません。

コンポーネントの移行が完了し、DOMの準備が整うたびにコードを実行するにはどうすればよいですか？

Answer 1

Vue.jsルーターを使用しているため、新しいルートに移行するたびにVue.jsがDOMを更新する必要があります。デフォルトでは、Vue.jsはDOM更新を非同期で実行します。

Vue.jsがDOMの更新を完了するまで待つために、Vue.nextTick（コールバック）を使用できます。コールバックは、DOMが更新された後に呼び出されます。あなたのケースでは

、あなたが試すことができます：さらなる情報については

route: { 
    activate() { 
     this.$nextTick(function() { 
      // => 'DOM loaded and ready' 
     }) 
    } 
} 

を：

• https://vuejs.org/api/#Vue-nextTick
• https://vuejs.org/guide/reactivity.html#Async-Update-Queue

Answer 2

これは少し遅れる場合がありますが...私が正しく推測すれば、あなたが問題があるコンポーネントは、あなたがnaルート間を移動する。このようにして、Vueはコンポーネントを再利用し、コンポーネントを破棄して再作成するのではなく、変更する必要のあるコンポーネントを変更します。 Vueはkey属性をProperly trigger lifecycle hooks of a componentに提供します。コンポーネントのkeyを変更することで、Vueに再表示することができます。詳細はkey in guide、コードサンプルはkey in apiを参照してください。