javascript - vue js ajax call cannot read property 'push' of undefined -

i having problems vue.js when comes pushing data database webpage. using laravel 5.3 converts data jason. code posts server number of records fetched server response data in want display on webpage. here vue js code

new vue({         el: "#projects",         data: {              count: 0,             fetched_projects: [] }   methods:{        checkproject: function(){             var fetch = this.count += 4;                            axios.post('/loadmore', {fetch: fetch })                .then(function(response) {                    this.fetched_projects.push(response.data);                 })                .catch(function(error){                    console.log(error);                });         } 

html

 <div class="row">     <div class="col-md-3">         <ul v-for="more_projects in fetched_projects">             <li>@{{ more_projects }}</li>          </ul>      </div> </div> 

laravel controller

 public function setloadmore(request $request){    $new_projects = $request->fetch;    $results = model1::with('relation')->take($new_projects)->get();    return $results;   } 

the problem on this.fetched_projects.push(response.data); giving me "cannot read property 'push' of undifined"

you'd want this component, use arrow function:

 methods:{    checkproject: function(){         var fetch = this.count += 4;                        axios.post('/loadmore', {fetch: fetch })            .then(response => {               this.fetched_projects.push(response.data);            })            .catch(function(error){                console.log(error);            });     }