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>

数据是从 jquery 中获取的，因为如果我执行 console.log(this.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) 将 this 从外部范围带到函数范围，在您的 $http 成功处理程序中。

您是否检查过它是否没有造成任何问题？我不知道bind 是如何实现的。也许它不允许 Vue 触发它的 Reactivity System。

如果您将控制台中的值视为纯 JSON 对象，则可能是错误的。 Vue.js 将对象参数修改为 getter/setter/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
})