如何在组件和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

正如错误所说:

"数据"选项应该是一个功能

在组件中,数据必须是一个函数,您需要将数据块修改为一个函数,该函数将以被动方式返回要在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 2

data在Vue组件内部应该是一个返回对象的函数,如Vue.js常见陷阱中所述.