Vue nicht meine Daten rendern

Question

Ich habe eine Komponente, die ich Daten auf mit AJax erstellen und ich zeige dies in einer Vorlage. Im Prinzip habe ich dies:

mein Vue Code:

Vue.component('feedback-table', { 
    template: '#grid-template', 
    data: function() { 
     return { 
      chancesOfApproval:[], 
     } 
    }, 
    created:function(){ 
     $.getJSON('/getFeedbackQuestionsAndChances',function(data){ 
      this.chancesOfApproval = data.chancesOfApproval; 
     }.bind(this)); 
    }, 


}); 

new Vue({ 
    el: '#feedback-wrapper', 
}); 

Und hier ist meine Vorlage:

<template id="grid-template"> 

    <table class="table table-bordered table-responsive table-striped"> 
     <tr v-for="entry in chancesOfApproval"> 
      <td>@{{ entry.position }}</td> 
     </tr> 
    </table> 
</template> 

<div id="feedback-wrapper"> 
    <feedback-table></feedback-table> 
</div> 

Die Daten werden von der jquery getted denn wenn ich console.log (dies .chanceOfApproval) zum Beispiel erscheint es in der Konsole gut. Und ich bekomme keinen Fehler in meiner Konsole, deshalb habe ich keine Ahnung, warum es nicht funktioniert.

Answer 1

Es verhält sich wie erwartet hier, wo ich die getJSON für eine setTimeout ausgeschaltet habe, die die gleiche Aufgabe erledigt.

Vue.component('feedback-table', { 
 
    template: '#grid-template', 
 
    data: function() { 
 
    return { 
 
     chancesOfApproval: [], 
 
    } 
 
    }, 
 
    created: function() { 
 
    /* 
 
    $.getJSON('/getFeedbackQuestionsAndChances', function(data) { 
 
     this.chancesOfApproval = data.chancesOfApproval; 
 
    }.bind(this)); 
 
    */ 
 
    setTimeout(() => { 
 
     this.chancesOfApproval = [{ 
 
     position: 1 
 
     }, { 
 
     position: 2 
 
     }]; 
 
    }, 500); 
 
    }, 
 

 

 
}); 
 

 
new Vue({ 
 
    el: '#feedback-wrapper', 
 
});

<script src="//cdnjs.cloudflare.com/ajax/libs/vue/2.0.3/vue.min.js"></script> 
 
<template id="grid-template"> 
 

 
    <table class="table table-bordered table-responsive table-striped"> 
 
    <tr v-for="entry in chancesOfApproval"> 
 
     <td>@{{ entry.position }}</td> 
 
    </tr> 
 
    </table> 
 
</template> 
 

 
<div id="feedback-wrapper"> 
 
    <feedback-table></feedback-table> 
 
</div>

Answer 2

Sie function.bind verwenden (diese) this vom äußeren Umfang zum Funktionsumfang zu bringen, in Ihrem $http Erfolg Handler.

Haben Sie überprüft, ob es Probleme gibt? Mir ist nicht bekannt, wie bind implementiert ist. Vielleicht erlaubt es Vue nicht, seine Reactivity System auszulösen.

Wenn Sie Werte in der Konsole als einfaches JSON-Objekt sehen, ist es wahrscheinlich falsch. Vue.js modifiziert Objektparameter zu Gettern/Settern/Beobachtern, damit es an das DOM binden kann.

Alternativ versuchen Sie die Pfeilfunktion oder verwenden Sie eine self Variable, nur um zu sehen, ob es das Problem löst?

Pfeil-Funktion (ES6 und höher):

created:function(){ 
    $.getJSON('/getFeedbackQuestionsAndChances',data => { 
     this.chancesOfApproval = data.chancesOfApproval; 
    }); 
} 

oder eine lokale Variable verwenden:

created:function(){ 
    var self = this; // self points to this of Vue component 
    $.getJSON('/getFeedbackQuestionsAndChances',function(data){ 
     self.chancesOfApproval = data.chancesOfApproval; 
    }); 
} 

Noch ein Hinweis: statt setTimeout(), haben Sie auch die Möglichkeit, Vue.nextTick() wie folgt:

Vue.nextTick(function() { 
    // DOM updated 
}) 

oder in Ihrem Fall:

this.$nextTick(function() { 
    // DOM updated 
})