更新vuejs组件来自家长的ajax调用

Question

VueJs的新功能。我想知道如何/在哪里进行Ajax调用来动态地将数据拉到下面的Vue表中？

https://jsfiddle.net/yyx990803/xkkbfL3L/?utm_source=website&utm_medium=embed&utm_campaign=xkkbfL3L

我（大致）修改上面的例子如下：

var demo = new Vue({ 
    el: '#demo', 
    data: { 
    searchQuery: '', 
    gridColumns: ['name', 'power'], 
    gridData: [] 
    }, 
    methods: { 
    fetchUsers: function() { 
     ... 
     // ajax call using axiom, fetches data into gridData like this: 
     axios.get('http://localhost/url') 
     .then(function(response) { 
      this.gridData = response.data; 
     }) 
     .catch(function(error) { console.log("error"); }) 
     ... 
    } 
    }, 
    created: function() { 
    this.fetchUsers(); 
    } 
}) 

我试图从这里纳入AJAX件：

https://jsfiddle.net/chrisvfritz/aomd3y9n/

我已经添加了fetchUser方法，它使ajax调用来拉取数据。我能够拉下我的数据并使用提取和公理将它打印​​到控制台，所以我知道这部分工作。

但是，我的数据从未出现或更新。表格加载空白。我认为这与我在Vue模型对象（demo）中创建钩子而不是组件本身上的钩子有关。但我不太清楚如何修改该示例来解决该问题，因为该示例从父级传递数据。

有人可以给我一些指导吗？

Answer 1

你的问题是就在这里：

.then(function(response) { 
    this.gridData = response.data; 
}) 

在您的匿名函数中你，那么你不必在预期范围内。最简单的解决方案是将.bind（this）添加到该方法。

.then(function(response) { 
    this.gridData = response.data; 
}.bind(this)) 

通过添加它，您的方法体将知道外部上下文，并且您可以访问组件数据。