Вы связываете обработчик submit
с div
, который никогда не будет работать, так как этот элемент не имеет этого события в первую очередь.Что вы могли бы (и, вероятно, должны) сделать, это добавить все эти поля ввода в form
, в котором есть событие submit
.
<form @submit="logintest">
<h1>Login</h1>
<input v-model="personeelsnummer" type="text" name="personeelsnummer" placeholder="personeelsnummer">
<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">
<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
}
}
})