错误：“请求中止” axios laravel vuejs

Question

i want to add a function using laravel and vuejs and axios but it gives me error Error: "Request aborted" .if I delete form validation system and checkForm function it all works well,really i don't know what error sign what,what kind of error.

fonction.blade.php

<section id="main-content">
 <section class="wrapper">
  <div class="container" id="app">
   <div id="login-page">
    <div class="form-login">
     <div class="login-wrap">
      <form @submit="checkForm">
        <div v-if="errors.length">
          <div class="alert alert-danger" role="alert">
            <ul>
              <li v-for="error in errors">@{{ error }}</li>
            </ul>
          </div>
        </div>
        <input type="text" class="form-control" id="fonction" name="fonction" v-model="fonction.fonction" placeholder="fonction">
        <br>
        <button class="btn btn-theme" @click="addFonction">AJOUTER FONCTION</button>
      </form>
     </div>
      </div>
    </div>
  </div>
 </section>
</section>
<script src="{{asset('js/vue.js')}}"></script>
<script src="https://unpkg.com/axios/dist/axios.min.js"></script>

vuejs

    <script>
        window.Laravel = {!! json_encode([
            'csrfToken' => csrf_token(),
            'url' => url('/')
        ]) !!};
    </script>

<script>
       var app = new Vue({  
        el: '#app',
        data: {
            errors: [],
            fonctions:[],
            fonction:{
                fonction :''
            }
        },
        methods:{
           checkForm: function (e) {
            if (this.fonction.fonction) {
              return true;
            }
            this.errors = [];
            if (!this.fonction.fonction) {
              this.errors.push('fonction required.');
            }
            e.preventDefault();
          },
            addFonction:function(){
                axios.post(window.Laravel.url+'/addfonction/', this.fonction)
                .then(response => {
                  //console.log(response.data);
                    this.fonctions.unshift(this.fonction);
                    this.fonction={
                            fonction:''
                        }
                })
                .catch(error=>{
                    console.log(error);
                })
            },
            },
    });
</script>

SalarieController.php

public function addFonction(request $request){
      $fonction = new Fonction;
      $fonction->fonction = $request->fonction;
      $fonction->save();
      Response()->json(['etat' => true]);
    }

Answer 1

Same question, maybe it connect with <form> tag.
I am solve for myself by replace <form> this tag with <div> tag. Also I replace all submit events with click ones on button.