TypeError: Cannot read property 'push' of undefined [VueJs]

Question

I am trying to add an object to an array but it is not working with me, the program can't read the property push

I defined an array in <script>:

Data: function() {
  return {
     Projects: [
        {
           name: '',
           id: 0,
           subscribers: 0,
           products: {name:'',color:''},
        }
     ],
}

And in the function:

GetAllWorkspaces: function(){

   var app = this;

  const instance = axios.create({
       timeout: 1000,
       headers: {
              ........
            }
          });
  instance.get("XXXXXXX")
  .then( function(response) {
  console.log(response);
  Object.keys(response.data.result).forEach( function (product) {

      var subscribersCounter = 0;

      let example = {
         name: response.data.result[product].name,
         id: response.data.result[product].id,
         subscribers: response.data.result[product].subscribers,
         products: response.data.result[product].products,
      };

      let uploadedExample = {
         name: '',
         id: '',
         subscribers: '',
         products: {name:'',color:''},
      };

      uploadedExample.name = example.name;
      uploadedExample.id = example.id;

      if ( example.subscribers ) {
      Object.keys(example.subscribers).forEach(function (key) {
          subscribersCounter++;
      });
      }

      uploadedExample.subscribers = subscribersCounter;

      if ( example.products ) {
         Object.keys(example.products).forEach(function (Pkeys) {
            uploadedExample.products.name = Pkeys;
            Object.keys(example.products[Pkeys]).forEach(function (key) {
                if (key == 'color') {
                        uploadedExample.products.color = example.products[Pkeys][key];
                }
             });
          });
        }

        //add the new workspace to the list of workspaces.
        app.Projects.push(uploadedExample);

    });

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

My problem is with this line

app.Projects.push(uploadedExample);

where when I try to push an object into the array, the error message is shown:

TypeError: Cannot read property 'push' of undefined

If Projects is intended to be inside the data option of a vue component, and getAllWorkspaces is one of that component's methods, then the problem may be a simple typo (you've used Data instead of data.) If that's not what you're doing please show us the context of how these two pieces relate to each other in your app. — Daniel Beck
maybe it is because app.Projects.push(uploadedExample); are inside a function. Try to change this line Object.keys(response.data.result).forEach( function (product) use (app) { Or use ES6 fat arrow function — Christhofer Natalius

Máté Wiszt Máté Wiszt · Accepted Answer · 2018-08-27T07:46:05

As the error says, the problem is that app.Projects is undefined. This happens because 'this' refers to the function scope inside GetAllWorkspaces and not to the component scope (you can try it by console.logging 'this' - anyway- it is a good practice under all circumstances because 'this' can change from context to context). If you want to keep the component scope inside the method, you should use an arrow function like this:

GetAllWorkspaces: () => {
// do all your stuff
}

TypeError: Cannot read property 'push' of undefined [VueJs]

1 Answers