Issue encountered when implementing promise and await within a Vue method

I've implemented a function in the mounted() hook to fetch files from my Dropbox account using a promise. Once the promise is resolved successfully, I iterate through all the files and execute another promise function to retrieve additional information for each file and store it in an object.

data () {
    return {
        results: [],
        dropbox: [],
    }
},
mounted() {
    dropbox.filesListFolder({path: '/wallpapers'}).then(this.successHandler)
    this.dropbox = dropbox
},
methods: {
    successHandler (response) {
        const files = response.entries;
        async function processArray(files) {
            for (const item of files) {
                item['meta'] = await this.getFileInfo(item.id);
            }
        }
        processArray(files);
        this.results = files;
    }
    getFileInfo (id) {
        this.dropbox.filesGetMetadata({
            path: id,
        })
        .then(this.successFileInfo)
    },
    successFileInfo (response) {
        return response; 
    }
}

However, I encountered an error message:

Cannot read property 'getFileInfo' of undefined

Answer №1

It appears there is a scope issue due to the incorrect usage of this:

    let vm = this;
    async function processArray(files) {
        for (const item of files) {
            item['meta'] = await vm.getFileInfo(item.id);
        }
    }

Alternatively, you can utilize:

processArray.bind(this)(files);

UPDATE (based on comments):

Don't forget to include the return statement in the getFileInfo method

getFileInfo(id) {
    return this.dropbox.filesGetMetadata({
        path: id,
    })
    .then(this.successFileInfo)
}

Answer №2

When the code

item['meta'] = await this.getFileInfo(item.id);
is executed, the context of this points to the scope of the processArray function instead of the Vue component.

To address this issue, you can simply modify the code as follows:

async successHandler (response) {
    const files = response.entries;
    for (const item of files) {
        item['meta'] = await this.getFileInfo(item.id);
    }
    processArray(files);
    this.results = files;
}

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

ERESOLVE encountered issues resolving the dependency tree for a project using .NET Core 3.1 and Vue.js framework

I encountered an issue while trying to build my application. The error message is as follows: npm ERR! code ERESOLVE npm ERR! ERESOLVE unable to resolve dependency tree npm ERR! npm ERR! While resolving: <a href="/cdn-cgi/l/email-protection" class ...

Load a page and sprinkle some contents with a slide effect

I am brand new to jQuery and just starting out, so please excuse me if this question seems basic or silly. I would like the header and footer of my page to stay in place while the center content slides in from the right side when the page loads. This websi ...

Material UI - Radio buttons do not properly reflect the current state of the value

I'm diving into the world of full stack development and I'm working on a project to enhance my understanding of frontend programming with React JS and Material UI. Specifically, I've created a Dialog component to send data to the backend, bu ...

What type of Javascript is required for a photo carousel that displays random images from a designated folder?

I have a minor issue that has been keeping me up at night. I can't seem to shake it off and find the right solution! Currently, I am working with Bootstrap 4 as my Framework. My task is to create a full-page Carousel that cycles through images random ...

Having difficulty retrieving the necessary information for manipulating the DOM using Express, Ajax, and Axios

When working on DOM manipulation based on AJAX calls, I've encountered an issue where the response is being displayed on my page instead of in the console.log output. This makes it difficult for me to view the data and determine what needs to be inser ...

Uploading files with Vue.js Element-UI and axios triggers unwanted page refresh

I am utilizing the element-ui file upload component() to manage the frontend of image uploading. All functionalities work flawlessly (file is successfully sent to the server, etc). However, for some reason, after the axios's successful response code r ...

Is there a way to incorporate additional text into option text without compromising the existing values?

One challenge I'm facing is adding additional text to the options without changing their values upon selection. Would you be able to assist me with resolving this issue? I have come across the following HTML code: <select id="q_c_0_a_0_name"> ...

Issue: Headers cannot be set after they have been sent. This is a problem in node.js

I'm trying to create an application that allows users to execute commands via a URL, but I keep encountering this error message: _http_outgoing.js:346 throw new Error('Can\'t set headers after they are sent.'); ^Error: Can't ...

Exception encountered with HTML5 cache manifest

I attempted to implement the application cache feature on my website, but I am facing a major issue. I only want to cache three specific files: style.css, favicon.ico, and script.js. The problem arises when the browser also caches other files such as inde ...

What steps can I take to avoid keypress events causing issues with the browser's input functionality?

Utilizing Bootstrap's modal component, I have implemented an "Add User" dialog within my web application. In order to streamline the user experience and enable quick data entry, I am aiming for the escape and enter keys to close and submit the form re ...

What is the best way to combine a JSON response object with the variable J inside a for loop?

Received a JSON response as follows: { "name" : "chanchal", "login3" : "1534165718", "login7" : "1534168971", "login6" : "1534168506", "login5" : "1534166215", "login9" : "1534170027", "login2" : "1534148039", "lastname" : "khandelwal", ...

While everything ran smoothly on my local machine, the app crashed on Heroku as soon as I integrated express-handlebars into the

After adding this code to the app, it started crashing on Heroku servers. Interestingly, removing these codes resolved the issue and the app worked perfectly on Heroku. However, the app works fine with these codes when tested locally. const exphbs = req ...

How to include <li> in a preexisting <ul> using JSON data in jQuery

Here is the code snippet I am currently working with: <div id="tags"> <ul> </ul> </div> I want to add some items to the list using JSON data $.getJSON("data.json", function (data) { var html = ''; ...

Using Vue.js to transform a map filter into a variable

const managers = new Map([ ['<a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="6221235353535322060d0f030b0c4c010d0f">[email protected]</a>', '<a href="/cdn-cgi/l/email-protection" class="__cf_e ...

How can we send data from several input fields using jQuery ajax?

I have several input fields, such as <p>Filter by age</p> <select class="filter-users"> <option value="under20">Under 20</option> <option value="20to40">20 to 40</option> </select> <p& ...

How can I retrieve a Vuex data property from another Vuex data property?

In order to make color variables easily accessible throughout my Vue app, I have stored them in an array named "colors[]" within the Vuex store. This method works well when accessing the colors within component methods or inline styles. Now, I am storing ...

Expanding URL path parameters in Angular's ui-routerWould you like to

Can UI-router handle this type of routing? Parent state - /saved/:id Child state - /saved/:id/eat Here is the code snippet I am using. However, when I attempt to access it, the page redirects: .state('fruits.banana.saved', { url: &apo ...

Executing JavaScript Code Through Links Created Dynamically

I am currently developing a website with a blog-style layout that retrieves information from a database to generate each post dynamically. After all posts are created, the header of each post will trigger an overlaid div displaying the full article for tha ...

Aligning the tooltip element vertically

I've created a unique flexbox calendar layout with CSS tooltips that appear on hover. One challenge I'm facing is vertically aligning these tooltips with the corresponding calendar dates effectively. Although I prefer to achieve this alignment u ...

Unable to postpone the utilization of data in Vue until after retrieving the value from the database

I am facing an issue where I need to compare a string obtained from Firebase in document.check1 with specific strings (hardcoded in the function below) and display content accordingly. Currently, I know how to trigger this comparison on button click, but I ...