Как получить доступ к полям data в Vue из асинхронного метода?

Question

[eywsf]

Есть код:

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

И вот здесь - this.nameCity = response; - выдает ошибку Uncaught (in promise) TypeError: Cannot read properties of undefined

Как в Vue 3 из асинхронных методов работать с полями?

Comments

[AndromedaStar]

Вам необходимо ознакомится с понятием контекста функций в JS.
https://developer.mozilla.org/ru/docs/Web/JavaScri...

[eywsf]

AndromedaStar, это не совсем то. Здесь this работает, если метод не асинхронный. Проблема именно в сочетании Vue и асинхронности.

[AndromedaStar]

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

Боюсь, что вот так все будет работать.

[0xD34F]

Метод у вас не асинхронный (что это такое, вы, очевидно, не знаете - разберитесь).

Кстати, сделать его таковым - один из вариантов решения проблемы.

[eywsf]

0xD34F, спасибо, почтаю

[eywsf]

AndromedaStar, спасибо, заработало. напишите ответ - я его выберу, если вам важно )

Answer 1

[AndromedaStar]

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

Comments

[Антон Антон]

лучше уж совсем красиво сделать:

export default {
   data() {
        return {
            nameCity: '',
        }
    },
    methods: {
        async findCity(event){
            event.preventDefault() // интересно, зачем тут это, ну да ладно
            this.nameCity = await findCityCust()
        }, 
    },
}

[Дмитрий Беляев]

Антон Антон, async function сломает event.preventDefault(), так как она всегда выполняется в микротаске, а события вызываются в макротасках и превент нужно делать синхронно

[Антон Антон]

Дмитрий Беляев, не сломает. в микротаске будет после первого await (после последующих - в следубющих микротасках), до того от синхронных функций ничем не отличается и можно превентить.
Да и вообще, на самом деле не совсем понятно, зачем он там нужен. Разве что сабмит формы отменить. Ну так можно в шаблоне @submit.prevent="findCity" написать и в коде ничего не делать