javascript - :onchange event causing loop thru method

Question

我有一个使用 Vue.js 制作的应用程序，该应用程序正在使用 Axios 发出多个发布请求。在我的一个组件中，我有一个表格和一个选择框。选择框包含多个“导师组”，例如“4M07a”。每个导师组都有一群我需要在表格中显示的学生。我通过执行 :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);
    });
},