:onchange事件导致循环通过方法

Question

我有一个用vue.js制定的应用程序，此应用程序正在用Axios提出几个邮政请求。在我的一个组件中，我有一个表和一个选择框。SelectBox包含几个" TutorGroups"，例如" 4M07A"。每个辅导员组都有一堆我需要在表中展示的学生。我通过进行a：onchange事件并将所选值发送给我的方法实现了这一目标。在我的方法中，我正在使用Axios进行邮政请求，其中包含所选值，Teachername和apikey。问题是：onchange事件是导致通过我的方法循环的。当我查看DevTools中的"网络"选项卡时，我只会看到正在提出的无限请求。我希望有人可以帮助我解决这个问题。

我尝试使用不同的事件处理程序并将返回放入我的方法中，但到目前为止什么都没有。

我的selectbox：

<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