Question

I have a component that I get data on create with ajax and I show this in a Template. Basically I have this:

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

And here is my template:

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

The data is being getted from the jquery because if I do console.log(this.chanceOfApproval) for example, it appears fine in the console. And I do not get any error in my console, so I have no idea why it does not work.

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 / 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
})

或在你的情况下：

onClick

Vue not rendering my data

2 个答案: