Ax ios: данные предыдущего ответа назначаются переменной

Question

Я создаю интерфейс для системы бронирования пациентов с Vue. js, который представляет собой просто динамическую c веб-форму. Сначала пользователь выбирает тип treatment, затем practitioner, который он хочет видеть, и, наконец, время appointment. Все данные получены с помощью вызовов API RESTful с использованием ax ios.

. Доступные параметры в каждом поле формы фильтруются с использованием предыдущего выбора. Например, пользователю будет предоставлено только доступное время его выбранного практикующего, а практикующий может быть выбран только из группы практиков, которые могут выполнить выбранную процедуру.

Фильтрация практикующих на основе выбранного лечение работает просто отлично.

Однако фильтрация встреч по выбранному практикующему не работает - он не синхронизирован c: встречи загружаются для ранее выбранного практикующего. Я проверил бэкэнд, что нормально, и вызовы API выполняются синхронно c (т. Е. person_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 о наблюдателях или это ошибка Если кто-то может пролить свет на это в комментариях, это было бы здорово!

Answer 2

Вам нужно обновить sh practitionerId после получения людей из RESTful API.

Например, в treatmentId watch:

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