Axios：先前的响应数据被分配给变量

Question

我正在使用 Vue.js 创建患者预约系统的前端，它只是一个动态 Web 表单。用户首先选择treatment类型，然后选择他们想看的practitioner，最后选择appointment时间。所有数据都是通过使用 axios 的 RESTful API 调用获取的。

每个表单域中的可用选项都使用前一个选项进行过滤。例如，用户只会看到他们选择的从业者的可用时间，并且从业者只能从可以执行所选治疗的从业者组中选择。

根据选择的治疗过滤从业者就可以了。

但是，根据所选从业者过滤约会不起作用 - 它不同步：为先前选择的从业者加载约会。我检查了后端，这很好，API 调用是同步的（即person_id 与新选择的从业者的 id 匹配）。

是什么导致了这个问题，我该如何解决？

这是执行此过滤的 Vue.js 代码：

var app = new Vue({
    el: '#app',
    data: {
        appointments: [],
        practitionerId: 0,
        practitioners: [],
        treatmentId: 0,
        treatments: [],
    },
    mounted: function () {
        axios.get('/api/treatments')
            .then(response => this.treatments = response.data);
    },
    watch: {
        // filter available practitioners by the selected treatment
        treatmentId: function () {
            // get the allowed role ids for the selected treatment
            var allowedRoleIds = '';
            const allowedRoles = this.treatments[this.treatmentId - 1]['allowed_roles'];
            for (var i = 0; i < allowedRoles.length; i++) {
                allowedRoleIds += allowedRoles[i]['id'];
                if (i + 1 < allowedRoles.length) {
                    allowedRoleIds += ',';
                }
            }
            // load the practitioners using the allowed role ids
            axios.get('/api/people?role_ids=' + allowedRoleIds)
                .then(response => this.practitioners = response.data);
        },
        // filter the available appointments by the selected practitioner
        practitionerId: function () {
            axios.get('/api/appointments?person_id=' + this.practitionerId)
                // ERROR!!! This is out of sync.
                .then(response => this.appointments = response.data);
        }
    }
});

Answer 1

可以通过向appointments 变量添加观察者来解决问题。

我需要做的就是在watch: { ... } 中添加以下代码：

appointments: function () {
    // now it works -- even without any function body
}

这对我来说真的很奇怪。我不需要为变量创建一个观察者，以便在另一个观察者的函数体中更新该变量。

我要么错过了 Vue.js 文档中有关观察者的内容，要么这是一个错误。如果有人能在 cmets 中对此有所了解，那就太好了！

Answer 2

从 RESTful API 取人后需要刷新practitionerId。

例如在treatmentId手表：

axios.get('/api/people?role_ids=' + allowedRoleIds).then(response => {
    this.practitioners = response.data;

    // refresh practitionerId whenever fetch new people
    const selectedPractitionerId = this.practitionerId;
    this.practitionerId = 0;
    // if selected practitioner exists in new people
    practitioners.forEach(p => {
        if (p.id == selectedPractitionerId) {
            this.practitionerId = p.id;
        }
    }) // you can omit this search if you force the user to select new practitioner whenever they change treatment
});