Всем привет. Такой вопрос. Разбираюсь с vue.js. Есть страничка с формой и табличка с данными. 3 инпута и при нажатие на кнопку данные добавляются в таблицу. Делаю валидацию на пустые строки чтобы данные не отправлялись и вылезали ошибки. В данные момент у меня появляются ошибки, но пустые строки всё равно отправляются в таблицу и если вводишь правильные данные всё равно появляется сообщение о ошибках.
<template>
<form class="form-group" @submit.prevent="onSubmit" @submit="checkForm">
<p v-if="errors.length">
<b>Пожалуйста исправьте указанные ошибки:</b>
<ul>
<li v-for="error in errors" v-bind:key="error.index">{{ error }}</li>
</ul>
</p>
<input type="text" class="form-control" v-model="first_name" placeholder="Имя" />
<input type="text" class="form-control" v-model="last_name" placeholder="Фамилия" />
<input type="text" class="form-control" v-model="email" placeholder="Email" />
<button type="submit" class="btn btn-primary">Добавить</button>
</form>
</template>
<script>
export default {
props: ["users"],
data() {
return {
errors: [],
first_name: "",
last_name: "",
email: "",
};
},
methods: {
checkForm(e) {
if (this.first_name && this.last_name) {
return true;
}
this.errors = [];
if (!this.first_name) {
this.errors.push('Требуется указать имя.');
}
if (!this.last_name) {
this.errors.push('Требуется указать фамилию.');
}
e.preventDefault();
},
onSubmit() {
if (this.first_name.trim) {
const newUser = {
id: this.users.length + 1,
first_name: this.first_name,
last_name: this.first_name,
email: this.email,
};
this.$emit("addUser", newUser);
this.first_name = "";
this.last_name = "";
this.email = "";
}
},
},
};
</script>