: событие onchange, вызывающее цикл через метод

Question

У меня есть приложение, созданное с помощью Vue.js, это приложение делает несколько почтовых запросов с Axios.В одном из моих компонентов у меня есть таблица и поле выбора.Поле выбора содержит несколько групп tutorgroups, например «4M07a».В каждой tutorgroup есть группа учеников, которую мне нужно отобразить в таблице.Я достиг этого, выполнив событие: onchange и отправив выбранное значение в мой метод.В моем методе я делаю пост-запрос с axios с выбранным значением, имя_участника и apikey.Проблема в том, что событие: onchange вызывает цикл через мой метод.Когда я смотрю на вкладку сети в DevTools, я просто вижу неограниченные запросы.Я надеюсь, что кто-то может помочь мне с этой проблемой.

Я пытался использовать разные обработчики событий и помещать возврат в свой метод, но пока ничего не получалось.

Мой блок выбора:

<select v-model="selectedValue" :onchange="getStudents(this.selectedValue)" class="select-klas form-control">
    <option> Selecteer een tutorgroep </option>
    <option v-for="(tutorklas, index) in tutorklassen" :key="index">{{ 
    tutorklas.id }}</option>
</select>

Мой метод:

getStudents(event) {
            // zet data klaar om verzonden te worden
            const postTutorClassData = new FormData();
            postTutorClassData.append('docent', this.teachername)
            postTutorClassData.append('apikey', this.apikey)
            postTutorClassData.append('tutorgroep', event)

            // maak post request naar API
            axios.post(this.URL_TUTORKLAS, postTutorClassData)
            .then((response) => {
                this.docenten = response.data.docent;

                this.leerlingen = response.data.leerlingen;

                // force stop
                this.selectedValue = 'null';

            })
            .catch(function (error) {
                console.log(error);
            });
        },

Он не выдает никаких сообщений об ошибках, он просто продолжает цикл через мой метод.

Answer 1

:onchange - неправильный синтаксис для прослушивания события изменения в vue, вам также не нужно передавать this.selectedValue в метод, так как он будет доступен в ваших данных (у вас нет доступа кthis в шаблоне).

Попробуйте следующее:

Измените :onchange на:

@change="getStudents"

Обновите метод getStudents на:

getStudents() {
    const postTutorClassData = new FormData();

    postTutorClassData.append('docent', this.teachername);
    postTutorClassData.append('apikey', this.apikey);
    postTutorClassData.append('tutorgroep', this.selectedValue) // remove event and use selected value

    axios.post(this.URL_TUTORKLAS, postTutorClassData).then(response => {
        this.docenten = response.data.docent;
        this.leerlingen = response.data.leerlingen;

        // this.selectedValue = 'null';
        // Changing this to be null will re-trigger the change event, causing your infinite loop
    }).catch(function (error) {
        console.log(error);
    });
},

Answer 2

используйте @change вместо: onchange