How can you retrieve data fields in Vue using an async method?

Question

How can you retrieve data fields in Vue using an async method?

Snippet:

export default {
   data() {
        return {
            cityName: '',
        }
    },
    methods: {
        searchCity(event){
            event.preventDefault()
            fetchCityData().then(function(response) { 
                console.log(response)
               this.cityName = response;
            })
        }, 
    },
}

However, the line this.cityName = response; triggers an error Uncaught (in promise) TypeError: Cannot read properties of undefined

What is the correct way to handle data from asynchronous functions in Vue 3?

javascript vue.js vuejs3

Answer 1

Answer №1

the issue arises from this

variations between arrow and standard functions: this value

within function(){}, this refers to the global object

inside () => {}, this represents the current Vue instance

thus, modify it to

findCityCust().then(response => { 
    console.log(response)
    this.nameCity = response;
})

or

methods: {
    async findCity(event){
        event.preventDefault()
        this.nameCity = await findCityCust();
    }, 
},

Answer 2

the issue arises from this

variations between arrow and standard functions: this value

within function(){}, this refers to the global object

inside () => {}, this represents the current Vue instance

thus, modify it to

findCityCust().then(response => { 
    console.log(response)
    this.nameCity = response;
})

or

methods: {
    async findCity(event){
        event.preventDefault()
        this.nameCity = await findCityCust();
    }, 
},

Answer 3

Answer №2

Using arrow function instead of standard function:

export default {
   data() {
        return {
            nameCity: '',
        }
    },
    methods: {
        findCity(event){
            event.preventDefault()
            findCityCust().then((response) => { 
                console.log(response)
               this.nameCity = response;
            })
        }, 
    },
}

Answer 4

Using arrow function instead of standard function:

export default {
   data() {
        return {
            nameCity: '',
        }
    },
    methods: {
        findCity(event){
            event.preventDefault()
            findCityCust().then((response) => { 
                console.log(response)
               this.nameCity = response;
            })
        }, 
    },
}

How can you retrieve data fields in Vue using an async method?

Answer №1

Answer №2

Similar questions

What could be the reason behind receiving a TypeError upon refreshing the page, where it claims that a state is not found even though that may not be the actual situation?

Sending a series of values to PHP through jQuery

swapping out all content within the body tag of the HTML document

How are objects typically created in Node.js applications?

Issue: unable to establish a connection to 127.0.0.1:465 to send an email

Tips on how to properly display the date in v-Calendar

Axios mistakenly sending DELETE requests before GET requests

Encountering issues when implementing Parse.Cloud.httpRequest within Express - reporting a lack of success method available

Difficulty in moving to the left side

Analyzing the DOM content loading time for web pages generated using AJAX technology

Getting the response data from an XMLHttpRequest - Full guide with screenshots

Font distortion caused by Slick slider appears in an unexpected location in Chrome

Upon submission of user-entered data, save it in an HTML table by creating an array variable for each column of the table

Is it possible to use Javascript to read a text file?

Utilize jQuery append() to create a grid layout using <td> tags

Vue component failing to re-render after data modification

Unusual behavior observed when altering properties of checkboxes

Transforming a JSON string containing multiple arrays into a JavaScript object

Angular Material: div not being filled by layout-fill

Leveraging AJAX within a RESTful API in a Node.js environment to retrieve a JSON file and dynamically parse its contents according to the specific button selected on the front-end interface