更新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)) 

通過添加它，您的方法體將知道外部上下文，並且您可以訪問組件數據。