web-dev-qa-db-ja.com

コンポーネントとAxios内で使用するときにデータを機能させる方法は？

私は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>
vue.jsvuejs2axiosvue-component
20
redshift

エラーが言っているように：

「データ」オプションは関数でなければなりません

コンポーネントでは、 dataはfunction である必要があります。リアクティブな方法で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);
    }
});
40
Saurabh

Vueコンポーネント内のdataは、 Vue.jsの一般的な落とし穴 で説明されているように、オブジェクトを返す関数でなければなりません。

6
jingman

次のように簡単に入力できます。

data() {
    return {
        ...... tra-ta-ta.......
    }
},
3
Roman Yusupov