My Vue.js application is facing a problem where an async function is passing a variable as undefined even though it's properly defined before the function call.
The async function FETCH_DATA in my Vue.js application is defined like this:
async [FETCH_DATA](
{
rootGetters,
},
{ dataList, retries = 3 },
) {
// Code to fetch data
},
This function is invoked from another method called handleSubmission, where the itemList variable is logged and defined correctly before calling FETCH_DATA. Here's a snippet of that code:
async handleSubmission(successResponse) {
const { itemId } = successResponse;
if (successResponse.isPromotional) {
const itemList = [itemId];
console.log('Logged itemList:', itemList);
const response = await this.fetchData(itemList);
// Further code execution
}
},
However, when the itemList variable is passed to FETCH_DATA, it turns into undefined. Here are the console log outputs:
Logged itemList: [123456]
Received itemList in FETCH_DATA: undefined
I've tried verifying the scope, ensuring proper variable passing, and debugging with console.log statements, but I'm unable to understand why itemList is becoming undefined in the FETCH_DATA function.