Vue form not submitting

Question

I'm trying to submit a form with data in order to get an API key that I need to use to fetch the API data. I made a form in Vue.js, however, it's not submitting my form. I'm a beginner when it comes to Vue so i have no idea what I'm doing wrong. I would really appreciate some help.

My App.vue:

 <template>
  <div id="app">
   <Login @loginformdata="submitlogin"/>
  </div>
 </template>

 <script>
 import Login from './components/Login.vue';
 import Bootstrap from 'bootstrap';
 import axios from 'axios';


 export default {
   name: 'app',
   data()
   {
     return {
       errors: [],
       logins: []
   }
 },
 components: {
   Login
 },
 methods: {
   submitlogin(credentials){
   const {personeelsnummer, wachtwoord } = credentials;

   axios.post('http://localhost/api/apikey/', {
     personeelsnummer,
     wachtwoord
   })
   .then(res => this.logins)
   .catch(e => {
     this.errors.push(e)
   })
}
}
}
</script>

My Login.vue:

 <template>
<div @submit="logintest">
    <h1>Login</h1>
    <input v-model="personeelsnummer" type="text" name="personeelsnummer" placeholder="personeelsnummer">&nbsp;
    <input v-model="wachtwoord" type="password" name="wachtwoord" placeholder="wachtwoord">
    <input type="submit" value="Submit">
</div>
</template>

<script>
export default {
name: "Login",
data() {
    return {
        personeelsnummer: '',
        wachtwoord: ''
    }
},
methods: {
    logintest(p, w){
        alert('test');
        const login = {
            personeelsnummer: this.personeelsnummer,
            wachtwoord: this.wachtwoord
        }
        //Send to parent
        this.$emit('loginformdata', login);
    }
}
 }
  </script>

Answer 1

You are binding a submit handler on a div which will never work since this element does not have that event in the first place. What you could (and probably should) do is add all these input fields on a form which does have a submit event.

<form @submit="logintest">
  <h1>Login</h1>
  <input v-model="personeelsnummer" type="text" name="personeelsnummer" placeholder="personeelsnummer">&nbsp;
  <input v-model="wachtwoord" type="password" name="wachtwoord" placeholder="wachtwoord">
  <input type="submit" value="Submit" />
</form>

Also, passing data with Ajax requests can get tedious especially when you have massive amount of input fields to serialize and send along with the request, so I would recommend form-serialize for this. It supports two output formats, URL-encoded (default) or hash (JS objects).

<div id="app">
  <form @submit="logintest" ref="form">
    <h1>Login</h1>
    <input type="text" name="personeelsnummer">&nbsp;
    <input type="password" name="wachtwoord">

    <!-- Imagine 10 more fields in here -->

    <input type="submit" value="Submit" />
  </form>
</div>

import Vue from 'vue';
import serialize from 'form-serialize';

new Vue({
  el: '#app',

  methods: {
    logintest() {
      // Outputs { personeelsnummer: value, wachtwoord: value }
      let data = serialize(this.$refs.form, {
        hash: true
      });

      // Do something with data here
    }
  }
})