发出Ajax请求（Axios）时显示动画

Question

我有一个按钮，当单击以提交表单时，该按钮会进行动画处理，但无法按我的意愿工作。首先，当表单填写完毕并且用户单击“提交”按钮时，数据将发送到服务器，并且将出现警报，表明服务器已成功接收到数据。但是，当用户尝试再次填写其信息时，该按钮将设置动画，但数据不会将任何信息发送到服务器。这是我的代码

Form.vue（父组件）

<template>
  <div>
    <form @submit.prevent="onSubmit">
      <div>
        <InputField
          label="Full Name"
          required-field
          required-text
          placeholder-text="Your full name"
          @handleChange="fullName = $event"
        />
      </div>
      <FormButton @click="showAnimation"
    </form>
  </div>
</template>

<script>
export default {
  name: 'Contact Form',
  components: {
  // components
  },
  data() {
  // data
  },
  methods: {
    onSubmit(event) {
      const name = document.querySelector('.text-input');
      const button = document.querySelector('.form-button-wrapper');

      function toggleClass() {
        if (name.value !== '') {
          this.classList.toggle('active');
          this.disabled = true;
        }
      }

      function addClass() {
        this.classList.remove('active');
        this.classList.add('finished');
      }

      button.addEventListener('click', toggleClass);
      button.addEventListener('transitionend', toggleClass);
      button.addEventListener('transitionend', addClass);

      axios
        .post('url', {
          fullName: this.fullName
        })
        .then((response) => {
          console.log(response);
        })
        .catch((error) => {
          console.log(error);
        });
      event.target.reset();
    }
  }
}
</script>

FormButton.vue（子组件）

<template>
  <div>
    <button
    class="form-button-wrapper"
    :class="{ 'button-center': buttonCenter }"
    :click="animation"
  >
    <span class="submit-text" :class="{ 'button-left-text': !textCenter }">
      {{ buttonText }}
    </span>
    <span class="loading">
      <div class="lds-rolling">
        <div class="animation"></div>
      </div>
    </span>
    <span class="check">
      <span class="icon"></span>
    </span>
  </button>
  </div>
</template>

<script>
export default {
  name: 'Form Button',
  props: {
  // props
  },
  methods: {
    animation(event) {
      this.$emit('click', event);
    }
  }
};
</script>

我的问题是，当用户填写完表单后，单击“提交”按钮时，我希望按钮进行动画处理。我已经尝试过使用axios拦截器，但是仍然无法正常工作。