Блог

У меня есть компонент, при создании которого я получаю данные с помощью 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>
  

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

Он ведет себя так, как ожидалось здесь, где я отключил 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>  

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

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

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

В качестве альтернативы, почему бы вам не попробовать функцию arrow или использовать 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
})