Vue.js深度手表范围问题

Question

我正在尝试实现一个查找现有位置的表单，这几乎是一个简单的搜索。

问题是观察者内部的属性都没有更新。我可以看到，当API响应时，this.locations已更改，this.searchInProgress相同，但是组件的视图不会更新。

import locations from '../../api/Locations';
import Multiselect from 'vue-multiselect';
export default {
    name: 'LocationWidget',
    components: {
        Multiselect
    },
    watch: {
        formData: {
            deep: true,
            handler: (newValue, oldValue) => {
                this.searchInProgress = true;
                console.log(this.searchInProgress);
                locations.search(newValue).then((result) => {
                    this.locations = result.data.locations;
                    //this.searchInProgress = false;
                    console.log(this.locations);
                }).catch((e) => {
                    //this.searchInProgress = false;
                });
            }
        }
    },
    data() {
        return {
            searchInProgress: false,
            locations: [],
            formData: {
                location: '',
                street: '',
                street2: '',
                city: '',
                zip: '',
                country_id: null,
            }
        }
    },
}

Answer 1

问题是您用箭头函数定义了手表处理程序，这意味着此功能中的this是不是组件，而是全局范围。p>解决方案：使用普通功能。

handler(newValue) {