#vue.js #axios
#vue.js #axios
Вопрос:
Когда я нажимаю кнопку на моем модальном с пустым полем на моем входе, это дает мне неопределенное значение на моей консоли. И когда я добавляю значение в свой ввод и нажимаю кнопку, оно добавляется в мою базу данных. Проблема в том, что даже пустое поле или неопределенное значение также добавляются в мою базу данных, и 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>
Ответ №1:
Самый простой способ остановить это — добавить проверку данных. И проверьте состояние в верхней части вашего метода. category_description !== undefined
. Кстати, переместите свой e.preventDefault()
тоже наверх.
Комментарии:
1. Это не работает, неопределенное все еще отображается и добавляется в мою базу данных
Ответ №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
}
}
Комментарии:
1. не работает, сэр! это не добавление в мою базу данных. Модальный не закрывается
Ответ №3:
Когда вы нажимаете на Add Category
кнопку, она запускает addCategory
вместе с вашим методом проверки.
Возвращаемое значение метода проверки не влияет на запуск addCategory
.
Эту проблему можно решить следующими способами.
- Вызывайте
addCategory
только при наличии некоторых допустимых данных
<button type="submit" @click="category_description != undefined ? addCategory() : ''" class="btn btn-primary"> Add Category </button>
- Вызовите метод проверки внутри addCategory, а затем продолжайте.
Комментарии:
1. Неопределенное значение не отображается в моей консоли. Но проблема больше не в добавлении в мою базу данных. Я обновляю приведенные выше коды. Я добавляю это в свою addCategory ‘vm.checkForm()’
2. @MayaLi Обновите код. `addCategory’ должен быть вызовом функции.
3. Как мне это сделать, сэр?