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

vue.js Vue.js

斯丁泡芙

2020-03-12

我是新来的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>

第1269篇《在组件和Axios中使用时如何使数据工作？》来自Winter(https://github.com/aiyld/aiyld.github.io)的站点

共2个回答
ASamGreen 2020.03.12

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

DavaidTony宝儿 2020.03.12

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

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

相似问题

0 回答

0 回答

5 回答

25 回答

0 回答

0 回答

问题类别

JavaScript Ckeditor Python Webpack TypeScript Vue.js React.js ExpressJS KoaJS CSS Node.js HTML Django 单元测试 PHP Asp.net jQuery Bootstrap IOS Android