Форма не отправляется - PullRequest
0 голосов
/ 21 января 2019

Я пытаюсь отправить форму с данными, чтобы получить ключ API, который мне нужно использовать для получения данных API.Я создал форму в Vue.js, однако она не отправляет мою форму.Я начинающий, когда дело доходит до Vue, поэтому я понятия не имею, что я делаю неправильно.Я был бы очень признателен за помощь.

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>

1 Ответ

0 голосов
/ 21 января 2019

Вы связываете обработчик submit с div, который никогда не будет работать, так как этот элемент не имеет этого события в первую очередь.Что вы могли бы (и, вероятно, должны) сделать, это добавить все эти поля ввода в form, в котором есть событие submit.

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

Кроме того, передача данных с помощью запросов Ajax может быть утомительной, особенно если у вас есть огромное количество полей ввода для сериализации и отправки вместе с запросом, поэтому я бы порекомендовал form-serializeза это.Он поддерживает два выходных формата: кодированный по умолчанию (по умолчанию) или хэш (объекты JS).

<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
    }
  }
})
Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.
...