在組件和Axios中使用數據時如何獲取數據？

我是VueJS2和Axios的新手，不太瞭解如何在組件內使用數據時工作。在組件和Axios中使用數據時如何獲取數據？

爲什麼不'我的測試工作？

我收到以下錯誤控制檯：

[Vue公司提醒]：在「數據」選項應該是返回組件定義每個實例值的函數。

[Vue警告]：屬性或方法「符號」未在實例上定義，而是在渲染過程中引用。確保在數據選項中聲明反應數據屬性。（在根實例中找到）

我的簡單的測試：

我的數據（剪斷爲了簡潔）：

[{"id":1, "name": "Airfield"}, {"id":2, "name": "Ship Yard"}]

我的組分：

Vue.component('symbols-table', { 
    template: '<h1>Hello World</h1>', 
    data: { 
     symbols: [] 
    }, 
    created: function(){ 
     axios.get('symbols.json').then(response => this.symbols = response.data); 
    } 
});

Vue實例：

var app = new Vue({ el: '#app' });

我的HTML：

<symbols-table> 
    <ul><li v-for="symbol in symbols">{{symbol.name}}</li></ul> 
</symbols-table>

來源

2017-02-22 redshift

由於錯誤的說法：

「數據」選項應該是一個功能

在組件data must be a function，你必須修改數據塊是它會返回一個函數DOMin使用的數據結構被動方式：

Vue.component('symbols-table', { 
    template: '<h1>Hello World</h1>', 
    data: function() { 
     return { 
      symbols: [] 
     } 
    }, 
    created: function(){ 
     axios.get('symbols.json').then(response => this.symbols = response.data); 
    } 
});

來源

2017-02-22 16:28:20 Saurabh

謝謝！的確，這是其中一個問題......我應該知道這一點。但是，在控制檯中仍然出現以下錯誤：「屬性或方法」符號「未在實例上定義，而是在渲染.... snip ..時引用」。我的代碼看起來與上面相同，但是提到了添加的數據函數。有任何想法嗎？ – redshift

@redshift問題是你在子級有'符號'，但是你在父級別的DOM上使用它。 – Saurabh

謝謝，這是問題所在。 – redshift

data分量應該返回返回一個對象在函數內部，如所描述here。

來源

2017-02-22 16:27:26 jingman

在組件和Axios中使用數據時如何獲取數據？

回答

相關問題