У меня есть приложение, созданное с помощью 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);
});
},
Он не выдает никаких сообщений об ошибках, он просто повторяет мой метод.
@WillJenkins По какой-то причине это совсем не входит в мой метод. он возвращает это сообщение об ошибке: «Неожиданный токен ('
: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);
});
},
Теперь работает, спасибо! причина, по которой у меня была нуль в качестве строки, заключалась в том, что я заставлял цикл останавливаться, давая ему недопустимое значение для сообщения, теперь, когда я думаю об этом, я мог бы просто сказать ноль вместо того, чтобы сделать его строкой, как вы сказали, ха-ха .
используйте @change вместо :onchange
Оберните свое изменение в функцию:
:onchange = "()=>getStudents(this.selectedValue)"