Vue.js：非同期コンポーネントでafterEnterフックを使用する方法

Question

hereのようにJS Hookを使用したいと思います。特に、非同期コンポーネントにafterEnterフックを使用したいと思います。

これは私の非同期コンポーネントです：

Vue.component('example', function(resolve, reject){ 
    let data = { 
     text: 'test data', 
    }; 

    $.post('http://example.com', data, function(r){ 
     r = JSON.parse(r); 

     if(r.success) { 
      resolve({ 
       template: r.data, 
       afterEnter: function(el, done){ 
        console.log('test'); 
       } 
      }); 
     } 
    }); 
}); 

これは、AJAX呼び出しをサーバから取得するものであり、それはr.dataにテンプレートに渡されるものです。

<transition v-on:after-enter="afterEnter"></transition> 

これらは私が得る2つのエラーです。

[Vue warn]: Property or method "afterEnter" is not defined on the instance but referenced during render. Make sure to declare reactive data properties in the data option.

[Vue warn]: Invalid handler for event "after-enter": got undefined

非同期コンポーネントとJSフックを使用することが可能ですか？もしそうでなければ、私はこれにどのようにアプローチすべきですか？私の目的は、Vue（および/またはvue-router）がコンポーネントテンプレートをページに挿入した後にカスタムJSを実行して、イメージスライダやその他のものをinitiliazeできるようにすることです。私のカスタムJSは、最初の負荷だけでなく、コンポーネントがナビゲートされるたびに起動することが重要です。

ありがとうございます。

Answer 1

この警告は、Vueがテンプレート内で参照する"afterEnter"という名前のプロパティまたはメソッドを検索していますが、見つけることができないことを意味します。 resolve関数内にafterEnterをライフサイクルフックのように定義しましたが、これはVueインスタンスのメソッドの1つである必要があります。

だから、あなたのresolve機能は次のようになります。

​​