Question

如何从异步方法访问 Vue 中的数据字段？[重复]

2021-11-10

673

javascript vue.js vuejs3

代码：

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 中使用异步方法中的字段？

Answer 1

错误是由 this 引起的

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

在 function(){} 中， this 是全局对象

在 () => {}code> 中， this 是当前的 Vue 实例

因此将其更改为

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

或

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

Answer 2

标准函数未绑定到组件，请尝试箭头函数：

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