时间戳

首页 > 解决方案 > :onchange 事件导致循环通过方法

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

问题描述

我有一个使用 Vue.js 制作的应用程序，该应用程序正在使用 Axios 发出几个发布请求。在我的一个组件中，我有一个表格和一个选择框。选择框包含几个“导师组”，例如“4M07a”。每个导师组都有一堆我需要在表格中显示的学生。我通过执行 :onchange 事件并将所选值发送到我的方法来实现这一点。在我的方法中，我正在使用 axios 使用所选值、teachername 和 apikey 进行发布请求。问题是 :onchange 事件通过我的方法导致循环。当我查看 DevTools 中的网络选项卡时，我只看到发出了无限的请求。我希望有人可以帮助我解决这个问题。

我尝试使用不同的事件处理程序并在我的方法中放置一个 return，但到目前为止没有任何效果。

我的选择框：

<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);
            });
        },

它没有给出任何错误消息，它只是通过我的方法不断循环。

标签： javascriptvue.jsevent-handlingaxios

解决方案

: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);
    });
},

推荐阅读