Почему все еще добавление даже с формой проверки?

Question

Когда я нажимаю кнопку на моем модале с пустым полем на моем входе, это дает мне неопределенное значение на моей консоли.И когда я добавляю значение к своему входу и нажимаю кнопку, он добавляет в мою базу данных.Проблема даже в том, что пустое поле или неопределенное значение также добавляются в мою базу данных, а подсистема подсчета не работает.Я хочу предотвратить добавление пустого поля в мою базу данных и предотвратить неопределенное.Кто-нибудь может мне помочь?

            //start of method
     checkForm: function(e) {
          if (this.category_description) {
            return true;
          }

          this.errors = [];

          if (!this.category_description) {
            this.errors.push('Category required.');
          }
          e.preventDefault();
        },

      addCategory : function() {
        axios({
            method : "POST",
            url : this.urlRoot + "category/add_category.php",
            data : {
                description : this.category_description
            }
        }).then(function (response){
            vm.checkForm(); //for FORM validation
            vm.retrieveCategory();
            console.log(response);
            swal("Congrats!", " New category added!", "success");   
            vm.clearData();
        }).catch(error => {
            console.log(error.response);
        });
    },
     //end of method

     <form id="vue-app" @submit="checkForm">
    <div class="modal" id="myModal" > <!-- start add modal -->
        <div class="modal-dialog">
            <div class="modal-content " style="height:auto">

                <!-- Modal Header -->
                <div class="modal-header">
                  <h4 class="modal-title"> Add Category </h4>
                  <button @click="clearData" type="button" class="close" data-dismiss="modal"><i class="fas fa-times"></i></button>
                </div>

                <!-- Modal body -->
                <div class="modal-body">
                    <div class="form-group">
                        <div class="col-lg-12">
                            <input type="text" class="form-control" id="category_description" name="category_description" v-model="category_description" placeholder="Enter Description">
                            <p v-if="errors.length">
                                <span v-for="error in errors"> {{ error }} </span>
                            </p>
                        </div>
                    </div>
                </div>



                <!-- Modal footer -->
                <div class="modal-footer">
                  <button type="submit"@click="category_description !== undefined ? addCategory : ''" class="btn btn-primary"> Add Category </button>
                </div>
            </div>
        </div>
    </div>
    </form>

Answer 1

Когда вы нажимаете кнопку Add Category, она вызывает addCategory вместе с вашим методом проверки.

Возвращаемое значение метода проверки не влияет на запуск addCategory.

Эта проблема может быть решена следующими способами.

1. Вызов addCategoryтолько при наличии достоверных данных

<button type="submit" @click="category_description != undefined ? addCategory() : ''" class="btn btn-primary"> Add Category </button>

Вызвать метод проверки внутри addCategory и затем продолжить.

Answer 2

Прежде всего сделайте это:

-  <button type="submit" @click="category_description !== undefined ? addCategory : ''" class="btn btn-primary"> Add Category </button>
+  <button type="submit" @click.prevent="addCategory" class="btn btn-primary"> Add Category </button>

, а затем в addCategory:

addCategory() {
  if (!this.category_description) {
    return;
  } else {
  //  do your stuff here
  }

}

Answer 3

Самый простой способ остановить это - добавить проверку данных.И проверка состояния в верхней части вашего метода. category_description !== undefined.Кстати, переместите ваш e.preventDefault() на вершину тоже.