Rest API lädt die Daten nicht schnell genug, bevor die Route mit vue.js und vue-router angezeigt wird

Question

Verwendung von Vue.js mit Vue-Router im Einklang mit WP Rest API 2. Wenn ich zu einer Route wechsle, sehe ich das div erscheint, das den Inhalt enthalten sollte, und dann wird der Inhalt schließlich geladen. Ich habe auch diesen Fehler:

[Vue warnen]: Fehler beim Ausdruck Auswertung „content.content.rendered“: Typeerror: kann Eigenschaft ‚gemacht‘ undefinierter

Der Inhalt auf einem Computer lädt lesen schließlich, sogar mit dem Fehler, aber auf Mobilgeräten wird der Inhalt überhaupt nicht angezeigt. Dies ist meine Methode, eine bestimmte Seite zu greifen. Ich habe versucht, nextTick zu verwenden, konnte es aber nicht richtig funktionieren.

Jede Hilfe würde sehr geschätzt, und bitte lassen Sie mich wissen, wenn Sie weitere Informationen benötigen.

<template> 

<div> 
<div class="animated cateringWrap"> 
    <h1>{{ content.title.rendered }}</h1> 
    {{{ content.content.rendered }}} 
</div> 
</div> 

</template> 



<script> 
export default { 
data() { 
    return { 
    content: [] 
    } 
}, 


ready: function(){ 
    this.loadContent(); 
}, 

methods: { 
    loadContent: function() { 
    this.$http.get('http://localhost/t/wp-json/wp/v2/pages/82').then(function(response){ 
     this.content = response.data; 
    }); 


    } 
} 

} 

</script> 

alt text http://oi67.tinypic.com/20ker05.jpg

Answer 1

Verwenden Daten Hookschen vue-Router.

http://router.vuejs.org/en/pipeline/data.html

route: { 
    data: function (transition) { 
    return this.$http.get(...); 
    } 
} 

Dann in der Vorlage:

<div v-if="$loadingRouteData">Loading ...</div> 
<div v-else>Your current HTML.</div> 

Answer 2

Eine einfache Lösung ist, Vue, um zu verhindern versucht, die Objekteigenschaft zuzugreifen :. Zuerst setzen Sie den ursprünglichen content Wert auf null, basierend auf Ihrem Beispiel gibt es keinen Grund zu setzen ist als ein leeres Array. Es sieht so aus, als ob Ihnen ein Objekt aus Ihren Antwortdaten zugewiesen wird. Dann, aus Ihrer Sicht, tun Sie das einfach:

{{{ content ? content.content.rendered : null }}}