How to access data fields in Vue from async method? [duplicate]

Question

Code:

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

And here - this.nameCity = response; - throws an error Uncaught (in promise) TypeError: Cannot read properties of undefined

How to work with fields from asynchronous methods in Vue 3?

Answer 1

the error is caused by this

differences-between-arrow-and-regular-functions: this value

in function(){}, this is the global object

in () => {}, this is the current Vue instance

so change it to

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

or

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