web-dev-qa-db-fra.com

Vue JS renvoie les données [__ob__: Observer] au lieu de mon tableau d'objets

J'ai créé une page sur laquelle je veux extraire toutes mes données de la base de données avec un appel d'API, mais VueJS et Javascript sont nouveaux pour moi et je ne sais pas où je me trompe. Je l'ai testé avec Postman et j'ai récupéré le bon JSON.

Voici ce que je reçois:

[__ob__: Observer]
length: 0
__ob__: Observer {value: Array(0), dep: Dep, vmCount: 0}
__proto__: Array

C'est ce que je veux:

(140) [{…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, …]
[0 … 99]
[100 … 139]
length: 140
__ob__: Observer {value: Array(140), dep: Dep, vmCount: 0}
__proto__: Array

C'est mon fichier de modèle Vue:

<template>
    <div>
        <h2>Pigeons in the racing loft</h2>
        <div class="card-content m-b-20" v-for="pigeon in pigeons" v-bind:key="pigeon.id">
            <h3>{{ pigeon.id }}</h3>
        </div>
    </div>
</template>

<script>
export default {
    data(){
        return{
            pigeons: [],
            pigeon: {
                id: '',
                sex: '',
                color_id: '',
                pattern_id: '',
                user_id: '',
                loft_id: '',
                country: '',
                experience: '',
                form: '',
                fatique: ''
            },
            pigeon_id: ''
        }
    },
    created(){
        this.fetchPigeons();
        console.log(this.pigeons); // Here I got the observer data instead my array
    },

    methods: {
        fetchPigeons(){
            fetch('api/racingloft')
            .then(res => res.json())
            .then(res => {
                console.log(res.data); // Here I get what I need
                this.pigeons = res.data;
            })
        }
    }
}
</script>

J'ai aussi essayé de le faire avec axios, mais cela m'a donné exactement la même chose. Lorsque je le console de la méthode, il donne mes données, mais à l'extérieur, il ne donne rien.

javascriptarrayslaravelvue.jsaxios
3
shawnest

Cela se produit car Vue js convertit chaque élément des données en un élément pouvant être observé. Il est donc logique que la console enregistre quelque chose dans les données. La sortie sera quelque chose enveloppé dans un observateur.

Pour avoir une meilleure vision de vos données, je vous suggère d'installer les outils Vue dev. https://chrome.google.com/webstore/detail/vuejs-devtools/nhdogjmejiglipccpnnanhbledajbpd?hl=fr

3
Kevin LE GOFF

Vous devriez probablement attendre la fin de l'extraction, puis console.log le résultat.

created(){
    this.fetchPigeons().then(() => console.log(this.pigeons));
},

En procédant ainsi, vous enregistriez le résultat de manière synchrone afin qu'il soit exécuté avant l'extraction.

Edit: Comme @barbsan l’a souligné dans son commentaire ci-dessous, votre fetchPigeons doit retourner une promesse pour que then fonctionne. fetch renvoie une promesse, il vous suffit donc de retourner chercher dans fetchPigeons

fetchPigeons(){
    return fetch('api/racingloft')
    .then(res => res.json())
    .then(res => {
        console.log(res.data); // Here I get what I need
        this.pigeons = res.data;
    })
}
1
Husam Ibrahim