Vue.js: Wie benutze ich den afterEnter Hook mit einer asynchronen Komponente

Question

Ich möchte JS Hook wie beschrieben verwenden here. Insbesondere möchte ich den afterEnter Hook mit einer asynchronen Komponente verwenden.

Das ist meine Asynchron-Komponente:

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'); 
       } 
      }); 
     } 
    }); 
}); 

Dies ist, was der Ajax-Aufruf vom Server bekommt, und es ist, was auf die Vorlage in r.data geben wird.

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

Dies sind die zwei Fehler, die ich bekomme.

[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

Ist es möglich, JS Haken mit Asynchron-Komponenten zu verwenden? Und wenn nicht, wie soll ich das angehen? Mein Ziel ist es, benutzerdefinierte JS nach Vue (und/oder Vue-Router) zu starten, um die Komponentenvorlage auf die Seite zu injizieren, so dass ich Image-Slider und was auch immer initiieren kann. Es ist wichtig, dass mein benutzerdefinierter JS bei jedem Navigieren der Komponente und nicht erst beim ersten Laden ausgelöst wird.

Vielen Dank.

Answer 1

Diese Warnung bedeutet, dass Vue nach einer Eigenschaft oder Methode namens "afterEnter" sucht, die Sie in Ihrer Vorlage referenzieren (aber nicht finden können). Sie haben afterEnter in Ihrer resolve-Funktion so definiert, als wäre es ein Lebenszyklus-Hook, aber es muss eine der Methoden Ihrer Vue-Instanz sein.

Also, Ihre resolve Funktion soll wie folgt aussehen:

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