在组件和 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: ‘

Hello World

’, data: { symbols: [] }, created: function(){ axios.get(‘symbols.json’).then(response => this.symbols = response.data); } });

**Vue 实例**：

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

**我的 HTML** ：

• {{symbol.name}}

”`

原文由 redshift 发布，翻译遵循 CC BY-SA 4.0 许可协议

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

原文由 Saurabh 发布，翻译遵循 CC BY-SA 4.0 许可协议

Answer 2

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

原文由 jingman 发布，翻译遵循 CC BY-SA 4.0 许可协议