私のデータをレンダリングしていないVue

Question

私はajaxで作成するデータを取得するコンポーネントを持っています。これをテンプレートに表示します。基本的に私はこれを持っている：

私のVueコード：

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

そして、ここでは私のテンプレートです：

<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> 

私は（これをCONSOLE.LOGない場合ので、データはjqueryのからgettedされています.chanceOfApproval）たとえば、それはコンソールで正常に表示されます。私のコンソールには何のエラーもありませんので、なぜ動作しないのか分かりません。

Answer 1

ここでは、同じ割り当てを行うsetTimeoutのgetJSONを切り替えました。

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

あなたの$http成功ハンドラで、関数スコープに外側のスコープからthisをもたらすためにfunction.bind（これ）を使用しています。

問題が発生していないかどうか確認しましたか？ bindがどのように実装されているのか分かりません。おそらく、Vueがそのトリガーを許可していない可能性がありますReactivity System

コンソールに値がプレーンなJSONオブジェクトとして表示されている場合は、間違っている可能性があります。 Vue.jsはオブジェクト・パラメータをgetters/setters/observersに変更し、DOMにバインドできるようにします。

また、矢印の機能を試したり、self変数を使用して問題を解決するのはなぜですか。

アロー機能（上記ES6と）：

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

またはローカル変数を使用します。

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

別のノート：代わりにsetTimeout()の次のように、あなたもVue.nextTick()のオプションがあります：

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

またはあなたの場合：

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