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

У меня есть приложение, созданное с помощью Vue.js, это приложение делает несколько почтовых запросов с помощью Axios. В одном из моих компонентов у меня есть таблица и поле выбора. Поле выбора содержит несколько «репетиторских групп», например «4M07a». В каждой кураторской группе есть группа студентов, которых мне нужно отобразить в таблице. Я достиг этого, выполнив событие :onchange и отправив выбранное значение моему методу. В моем методе я делаю почтовый запрос с аксиомами с выбранным значением, именем учителя и апикеем. Проблема в том, что событие :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.info(error);
            });
        },

Он не выдает никаких сообщений об ошибках, он просто повторяет мой метод.

Оберните свое изменение в функцию: :onchange = "()=>getStudents(this.selectedValue)"

Will Jenkins 21.05.2019 15:15

@WillJenkins По какой-то причине это совсем не входит в мой метод. он возвращает это сообщение об ошибке: «Неожиданный токен ('

stefan de boer 21.05.2019 15:19
Поведение ключевого слова "this" в стрелочной функции в сравнении с нормальной функцией
Поведение ключевого слова "this" в стрелочной функции в сравнении с нормальной функцией
В JavaScript одним из самых запутанных понятий является поведение ключевого слова "this" в стрелочной и обычной функциях.
Концепция локализации и ее применение в приложениях React ⚡️
Концепция локализации и ее применение в приложениях React ⚡️
Локализация - это процесс адаптации приложения к различным языкам и культурным требованиям. Это позволяет пользователям получить опыт, соответствующий...
Улучшение производительности загрузки с помощью Google Tag Manager и атрибута Defer
Улучшение производительности загрузки с помощью Google Tag Manager и атрибута Defer
В настоящее время производительность загрузки веб-сайта имеет решающее значение не только для удобства пользователей, но и для ранжирования в...
Безумие обратных вызовов в javascript [JS]
Безумие обратных вызовов в javascript [JS]
Здравствуйте! Юный падаван 🚀. Присоединяйся ко мне, чтобы разобраться в одной из самых запутанных концепций, когда вы начинаете изучать мир...
Система управления парковками с использованием HTML, CSS и JavaScript
Система управления парковками с использованием HTML, CSS и JavaScript
Веб-сайт по управлению парковками был создан с использованием HTML, CSS и JavaScript. Это простой сайт, ничего вычурного. Основная цель -...
JavaScript Вопросы с множественным выбором и ответы
JavaScript Вопросы с множественным выбором и ответы
Если вы ищете платформу, которая предоставляет вам бесплатный тест JavaScript MCQ (Multiple Choice Questions With Answers) для оценки ваших знаний,...
2
2
375
2
Перейти к ответу Данный вопрос помечен как решенный

Ответы 2

Ответ принят как подходящий

: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.info(error);
    });
},

Теперь работает, спасибо! причина, по которой у меня была нуль в качестве строки, заключалась в том, что я заставлял цикл останавливаться, давая ему недопустимое значение для сообщения, теперь, когда я думаю об этом, я мог бы просто сказать ноль вместо того, чтобы сделать его строкой, как вы сказали, ха-ха .

stefan de boer 21.05.2019 15:30

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

Другие вопросы по теме