Vue not render my data

Question

У меня есть компонент, который я получаю данные для создания с помощью ajax, и я показываю это в шаблоне. В принципе у меня есть это:

мой Вью код:

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> 

Данные быть getted из JQuery, потому что если я console.log (это .chanceOfApproval), например, он отображается в консоли. И я не ошибаюсь в своей консоли, поэтому я понятия не имею, почему это не работает.

Answer 1

Он ведет себя так, как ожидалось, здесь я отключил getJSON для setTimeout, выполняющего то же назначение.

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

Вы используете function.bind (это), чтобы this из внешней сферы в области видимости функции, в обработчике $http успеха.

Вы проверили, не возникли ли какие-либо проблемы? Я не знаю, как реализован bind. Возможно, это не позволяет Vue запускать его Reactivity System.

Если вы видите значения в консоли как простой объект JSON, то это, вероятно, неверно. Vue.js изменяет параметры объекта на геттеры/сеттеры/наблюдатели, чтобы он мог привязываться к DOM.

В качестве альтернативы, почему вы не пытаетесь использовать функцию стрелки или использовать переменную self, просто чтобы узнать, разрешает ли она проблему?

функция Arrow (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 
})