How to access data fields in Vue from async method?

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?

DengSihan · Answer 1 · 2021-11-10T08:06:26.277

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();
    }, 
},

score 0 · Accepted Answer · answered Nov 10 '21 at 07:58

Standard function is not binded to component, try arrow function:

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

How to access data fields in Vue from async method?

2 Answers2