Блог

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

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

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

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

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

}
  

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

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

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

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

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

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