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

and here's the log

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?

from Newest questions tagged laravel-5 - Stack Overflow https://ift.tt/2Xlbvao
via IFTTT