My Vue.js application is experiencing issues with infinite post requests when a selectbox value changes. I have a table component that needs to display students from different 'tutorgroups'. Each tutorgroup, like '4M07a', has its own set of students. To achieve this, I am using an :onchange event in my selectbox to trigger a method which sends the selected value along with other data via Axios post request. However, the onchange event seems to cause a loop in the method, as observed in the network tab of DevTools where unlimited requests are being made. Can someone help me resolve this problem?
I have attempted using various event handlers and adding a return statement in my method without success.
Selectbox code snippet:
<select v-model="selectedValue" @change="getStudents(this.selectedValue)" class="select-klas form-control">
<option> Select a tutorgroup </option>
<option v-for="(tutorklas, index) in tutorklassen" :key="index">{{
tutorklas.id }}</option>
</select>
Method code snippet:
getStudents(event) {
// prepare data to be sent
const postTutorClassData = new FormData();
postTutorClassData.append('teacher', this.teachername)
postTutorClassData.append('apikey', this.apikey)
postTutorClassData.append('tutorgroup', event)
// make post request to API
axios.post(this.URL_TUTORKLAS, postTutorClassData)
.then((response) => {
this.teachers = response.data.teacher;
this.students = response.data.students;
// force stop
this.selectedValue = 'null';
})
.catch(function (error) {
console.log(error);
});
},
No error messages are displayed, just an endless loop in the method execution.