0

Всем привет. Такой вопрос. Разбираюсь с 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>

введите сюда описание изображения

1 ответ 1

1

в OnSubmit сделай доп проверку

if checkForm() {
      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 = "";
      }
}

Ваш ответ

Нажимая на кнопку «Отправить ответ», вы соглашаетесь с нашими условиями использования и подтверждаете, что прочитали и поняли наши политику конфиденциальности и нормы поведения.

Всё ещё ищете ответ? Посмотрите другие вопросы с метками или задайте свой вопрос.