dimanche 31 mai 2020

Laravel and VueJs: Cannot set property 'cats' of undefined

I'm having this code in the blade:

<list-categories-component></list-categories-component>

and this template with vue code

<template>
<div class="container">
    <div class="row justify-content-center">
        <div class="col-md-8">
            <div class="card">
                <div class="card-header">Example Component</div>
                <div class="card-body">
                    <ul>
                    <li v-for="cat in cats" :key="cat.cat_id"></li>
                    </ul>
                </div>
            </div>
        </div>
    </div>
</div>
</template>

<script>
export default {
    data(){
        return{
            cats:[],
        };
    },
    created() {
        this.fetchTaskList();
    },
    methods:{
        fetchTaskList(){
            axios.get('/api/listCats')
                .then(function (response) {
                    console.log(response.data.cats);
                    this.cats = response.data.cats;

                })
                .catch(function (error) {
                    // handle error
                    console.log(error);
                });
        }

    }
}
</script>

and here's the axios response

Axios response

and here's the log

console logs

but data can't be rendered successfully as it find an error here

this.cats = response.data.cats;

I changed this.cats = response.data.cats to this.cats = response.data to catch the array itself but still getting the same error.

I'm running npm run watch so what's the problem here and how to fix it?



via Chebli Mohamed

Aucun commentaire:

Enregistrer un commentaire