CODEWITHSUNDEEP
javascriptapivue.jsframeworksaxios
stefan de boer
stefan de boer

Reputation: 405

Vue form not submitting

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>

Upvotes: 0

Views: 5432

Answers (1)

Yom T.
Yom T.

Reputation: 9180

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

Upvotes: 2

Related Questions