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

Question

I am having problems with vue.js when it comes to pushing data from the database to the webpage. I am using laravel 5.3 which converts data to Jason. the code posts to the server the number of records to be fetched then the server response with the data in which i want to display on the webpage. here is 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 is on this.fetched_projects.push(response.data); its giving me "cannot read property 'push' of undifined"

score 2 · Accepted Answer · answered Mar 28 '17 at 13:07

2

You'd want this to be your component, so use an 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);
           });

   }

answered Mar 28 '17 at 13:07

CD..

72,281
25
154
163

thanks the other problem i am having is that its display everything and when i write @{{ more_projects.id }} which is the "id" field it doesn't display anything. – Ian Nato Mar 28 '17 at 13:26

score 0 · Answer 2 · answered Mar 28 '17 at 13:20

0

you are having "this" problem, try defining something like var that = this where you have defined fetch, and use that in place of this inside the post it should work.

answered Mar 28 '17 at 13:20

Jatin Marwah

84
4

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

2 Answers2