web-dev-qa-db-fra.com

Comment faire fonctionner les données lorsqu'elles sont utilisées dans un composant et Axios?

Je suis nouveau sur Vue.js et Axios. Je ne comprends pas très bien comment faire fonctionner l'option data lorsqu'elle est utilisée dans un composant.

Pourquoi mon test ne fonctionne-t-il pas?  

Je reçois l'erreur suivante dans la console:

[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)

Mon test simple:

Mes données (coupé pour être bref):

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

Mon composant: 

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

Instance Vue :

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

Mon HTML :

<symbols-table>
    <ul><li v-for="symbol in symbols">{{symbol.name}}</li></ul>
</symbols-table>
vue.jsvuejs2axiosvue-component
11
redshift

Comme le dit l'erreur:

L'option "data" devrait être une fonction 

Dans le composant, les données doivent être une fonction , vous devez modifier le bloc de données pour qu'il retourne la structure de données à utiliser dans DOM de manière réactive:

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

data dans un composant Vue doit être une fonction qui renvoie un objet, comme décrit dans les pièges communs de Vue.js .

5
jingman

Vous pouvez taper simplement comme ceci:

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