Error: When trying to set a property on an undefined object in vue.js, a TypeError is thrown because the object is not defined

Question

Error: When trying to set a property on an undefined object in vue.js, a TypeError is thrown because the object is not defined

I'm encountering an issue while attempting to populate my empty object with data received from a JSON server API. The problem persists on the same line repeatedly:

Uncaught (in promise) TypeError: Cannot set property 'itemListModel' of undefined at eval

Here is my code snippet:

data: function() {
return {
itemListModel: {}
}
}

methods: {
   getAllItemsFromDb: async () => {
    const url = 'https://localhost:44339/ListAll';
      await axios.get(url, {
    headers: {
        'Content-Type': 'application/json'
    }}).then((response) => {
         this.itemListModel = response.data
    })
    }
}

computed : {
   itemResultsFromDB: function(){

      return this.itemListModel
    }
}

I've also referred to a similar question here: Uncaught (in promise) TypeError: Cannot set property of undefined with Axios

Despite that, I can't seem to identify what's causing the discrepancy in my implementation?

javascript vue.js axios

Answer 1

Answer №1

The culprit in this situation appears to be the arrow function. I suggest converting getAllItemsFromDb into a traditional function:

methods: {
   function getAllItemsFromDb() {
      const url = 'https://localhost:44339/ListAll';

      axios.get(url, {
         headers: {
            'Content-Type': 'application/json'
         }
      }).then(function(response) {
         this.itemListModel = response.data
      })
   }
}

Answer 2

The culprit in this situation appears to be the arrow function. I suggest converting getAllItemsFromDb into a traditional function:

methods: {
   function getAllItemsFromDb() {
      const url = 'https://localhost:44339/ListAll';

      axios.get(url, {
         headers: {
            'Content-Type': 'application/json'
         }
      }).then(function(response) {
         this.itemListModel = response.data
      })
   }
}

Answer 3

Answer №2

When calling the getAllItemsFromDb function, make sure to utilize async/await for axios.get() instead of using a .then() block. Here's how you can achieve this:

getAllItemsFromDb: async () => {
  const apiUrl = 'https://localhost:44339/ListAll';
  const response = await axios.get(apiUrl, {
    headers: {
      'Content-Type': 'application/json'
    }
  });

  this.itemListModel = response.data;
}

Answer 4

When calling the getAllItemsFromDb function, make sure to utilize async/await for axios.get() instead of using a .then() block. Here's how you can achieve this:

getAllItemsFromDb: async () => {
  const apiUrl = 'https://localhost:44339/ListAll';
  const response = await axios.get(apiUrl, {
    headers: {
      'Content-Type': 'application/json'
    }
  });

  this.itemListModel = response.data;
}

Error: When trying to set a property on an undefined object in vue.js, a TypeError is thrown because the object is not defined

Answer №1

Answer №2

Similar questions

Keep only the selected properties in the object and eliminate all others

Following a successful login, the User ID fails to store in the session

Resolving AngularJS routes while invoking a controller with ng-include

Creating a unique Vue.js component with an HTML <select> element and v-model that adheres to W3C standards

Attempting to fetch a .ico file from the server side (Node ExpressJs) to the client side (ReactJS) triggers a 'TypeError: res.blob is not a function' error

A guide to delivering static images using NestJS

Unexpected identifier error encountered in iPhone IOS 10 Safari while attempting to parse JSON with the presence of the keyword "function

Avoiding the loading of textures on the obj model in three.js is essential

React Router v6 is throwing an error stating that within the <Routes> component, all children must be either a <Route> or <React.Fragment>

Encountering an issue: Unhandled error - Unable to access property 'parentNode' of a null value

Unraveling Complex JSON Structures in React

Utilizing the 'Day' Function in Visual Basic to alter the date and submit a form according to the day of the week

The functionality of the Binding class appears to be malfunctioning in relation to the value of the attached variable

Javascript enables the magnetization of cursor movements

The dynamic pages specified by the graphql query in the gatsby-node.js file are not being generated by Gatsby.js as expected

How can data be shared across different JavaScript functions?

The Axios pre-flight request is receiving the Access-Control-Allow-Origin response, but it's indicating an error because the header is missing

Here's a unique way to describe the issue: "Exploring the process of

What is the best way to import a JSON file in VueJs without the need for compilation?

Achieve Seamless Scrolling Without Using JavaScript - It Only Takes a Single Line of CSS!