首页 文章

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

提问于
浏览 次
7

我是VueJS2和Axios的新手，并且不太了解在组件中使用时如何使数据工作 .

Why doesnt' my test work?

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

[Vue warn]：“data”选项应该是一个在组件定义中返回每个实例值的函数 . [Vue警告]：属性或方法“符号”未在实例上定义，但在呈现期间引用 . 确保在数据选项中声明反应数据属性 . （在根实例中找到）

我的简单测试：

My data （为简洁起见）：

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

My component:

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

Vue instance ：

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

My HTML ：

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

2 回答

  • 20

    正如错误所说：

    “数据”选项应该是一个功能

    在组件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);
    }
});
    回复于
  • 4

    组件内部的 data 应返回一个返回对象的函数，如here所述 .

    回复于

相关问题