在组件和 Axios 中使用时如何使数据工作？

Question

我是 Vue.js 和 Axios 的新手。我不太明白如何在组件中使用 data 选项。

为什么我的测试不起作用？

我在控制台中收到以下错误：

[Vue warn]: The "data" option should be a function that returns a per-instance value in component definitions.

[Vue warn]: Property or method "symbols" is not defined on the instance but referenced during render. Make sure to declare reactive data properties in the data option. (found in root instance)

我的简单测试：

我的数据（为简洁起见被截断）：

[{"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>

Answer 1

data 在 Vue 组件中应该是一个 returns 对象的函数，如 the Vue.js common gotchas.

中所述

Answer 2

如错误所说：

The "data" option should be a function

在组件 data must be a function 中，您需要将数据块修改为一个函数，它将 return 以反应方式在 DOM 中使用的数据结构:

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

Answer 3

您可以像这样简单地输入：

data() {
    return {
        ...... tra-ta-ta.......
    }
},

在组件和 Axios 中使用时如何使数据工作？

How to get data to work when used within a component and Axios?

vue.js

vuejs2

axios

vue-component