Mounted-Methode wird ausgelöst, bevor Daten geladen werden - VueJS

Question

Ich verwende Vue Resource, um eine Bildersammlung von einer REST-API abzurufen. Die Anfrage wird im created Hook meiner Vue-Komponente gesendet.

Das Problem ist, ich versuche, auf die abgerufenen Daten im mounted Hook zuzugreifen, aber die Daten werden nicht geladen.

ich diesen Fehler in der Konsole:

[Vue warn]: Error in mounted hook: "TypeError: Cannot read property 'forEach' of undefined"

Hier ist meine Komponente:

<script> 
export default { 
    data() { 
    return { imgs : '' }; 
    }, 
    created() { 
    // the full url is declare in my main.js 
    this.imgs = this.$resource('acf/v3/pages/4'); 

    this.imgs.query().then((response) => { 
     console.log('success', response); 
     this.imgs = response.data.acf.gallery; 
    }, (response) => { 
     console.log('erreur', response); 
    }); 
    }, 
    mounted() { 
    // get the ref="image" in my dom template 
    let imgs = this.$refs.image; 

    imgs.forEach((img) => { 
     // I do some stuff with imgs 
    }); 
    } 
} 
</script> 

Wenn ich einen setTimeout um den Inhalt von mounted wickeln, funktioniert alles einwandfrei.

So verstehe ich nicht, wie ich warten kann, bis meine Daten geladen werden, bevor der mounted Hook ausgeführt wird. Ist das nicht die Rolle der Vue-Lebenszyklus-Hooks?

Answer 1

Da der this.imgs.query() Anruf async, Ihre mounted Hook aufgerufen wird, bevor der then Handler this.imgs setzt (was ich nehme an, dass mit einem Attribute ref="image" mit v-for auf ein Element in der Vorlage gebunden zu sein). Obwohl die Komponente bereits im DOM gemountet wurde, wurde die $refs noch nicht eingerichtet.

Ich würde eine Methode machen, "etwas mit imgs tun" und dann diese Methode in einer $nextTick callback in der then Handler des Async-Aufrufs aufrufen. Der Rückruf, der an $nextTick übergeben wurde, wird "nach dem nächsten DOM-Aktualisierungszyklus ausgeführt", was bedeutet, dass der $refs an diesem Punkt eingerichtet wird.

<script> 
export default { 
    data() { 
    return { imgs: '' }; 
    }, 
    created() { 
    // the full url is declare in my main.js 
    this.imgs = this.$resource('acf/v3/pages/4'); 

    this.imgs.query().then((response) => { 
     console.log('success', response); 
     this.imgs = response.data.acf.gallery; 
     this.$nextTick(() => this.doStuffWithImgs()); 
    }, (response) => { 
     console.log('erreur', response); 
    }); 
    }, 
    methods: { 
    doStuffWithImgs() { 
     // get the ref="image" in my dom template 
     let imgs = this.$refs.image; 

     imgs.forEach((img) => { 
     // I do some stuff with imgs 
     }); 
    } 
    } 
} 
</script>