Я пытаюсь создать контактную форму в vue js и PHP, но она не работает, и я получаю ошибки. Я использовал интернет-источники для создания этой формы, просмотрел много руководств, я не уверен, как это решить. И я очень новичок в vuejs, любая помощь будет оценена
вот мой код
<script>
export default{
data(){
return{
errorMessage: "",
successMessage: "",
errors: [],
trx_no: "",
name: "",
country: "",
email: "",
mobile_no: "",
myAddress: "",
newUser: {trx_no: "", name: "", country: "", email: "", mobile: ""}
}
},
mounted: function(){
this.getAllUsers();
},
myAddress: function() {
return this.$store.state.myAddress;
},
methods: {
saveUser: function(){
//console.info(this.newUser);
var formData = this.toFormData(this.newUser);
axios.post('http://localhost:8888/vue-and-php/public/api/update-info-form.php?action=update', formData, { crossdomain: true })
.then((response) => {
this.newUser = {trx_no: "", name: "", country: "", email: "", mobile: ""};
if (response.data.error){
this.errorMessage = response.data.message;
}else{
this.getAllUsers();
}
});
},
toFormData: function(obj){
var form_data = new FormData();
for(var key in obj){
form_data.append(key, obj[key]);
}
return form_data;
},
clearMessage: function(){
this.errorMessage = "";
this.successMessage = "";
},
//validation
checkForm: function (e) {
this.errors = [];
//if (!this.trx_no) {
// this.errors.push("TRX Address Required.");
//}
if (!this.name) {
this.errors.push("Name Required.");
}
if (!this.country) {
this.errors.push("Country Required.");
}
if (!this.email) {
this.errors.push('Email Required.');
} else if (!this.validEmail(this.email)) {
this.errors.push('Valid Email Address Required.');
}
if (!this.mobile_no) {
this.errors.push("Phone Number Required.");
}
if (!this.errors.length) {
return true;
}
e.preventDefault();
},
validEmail: function (email) {
var re = /^(([^<>()\[\]\\.,;:\s@"]+(\.[^<>()\[\]\\.,;:\s@"]+)*)|(".+"))@((\[[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}\])|(([a-zA-Z\-0-9]+\.)+[a-zA-Z]{2,}))$/;
return re.test(email);
}
}
}
</script>
а это контактная форма
<template>
<b-container>
<div class = "update-info">
<div class = "feature-text myinv-title">
<h5 class = "title title-sm">Update your information</h5>
</div>
<form
id = "app"
@submit = "checkForm"
method = "post"
novalidate = "true"
>
<p v-if = "errors.length">
<b>Please fill in all the fields</b>
<ul>
<li v-for = "error in errors" class = "alert alert-danger">{{ error }}</li>
</ul>
</p>
<div class = "form-row">
<div class = "form-group col-md-3">
<label for = "trx">TRX Address No.</label>
<input
id = "trx"
class = "form-control trx-address-nooverflow"
v-model = "myAddress"
type = "text"
name = "TRX Address"
readonly
>
</div>
<div class = "form-group col-md-3">
<label for = "name">Name</label>
<input
id = "name"
class = "form-control"
v-model = "name"
type = "text"
name = "name"
>
</div>
<div class = "form-group col-md-3">
<label for = "name">Country</label>
<country-select
id = "Country"
class = "form-control"
v-model = "country"
:country = "country"
topCountry = "US" />
</div>
<div class = "form-group col-md-3">
<label for = "email">Email ID</label>
<input
id = "email"
class = "form-control"
v-model = "email"
type = "email"
name = "email"
>
</div>
</div>
<div class = "form-row">
<div class = "form-group col-md-3">
<label for = "email">Mobile No</label>
<input
id = "mobile"
class = "form-control"
v-model = "mobile_no"
type = "text"
name = "mobile"
>
</div>
<div class = "form-group col-md-3">
<div class = "top-30">
<input type = "submit" value = "submit" class = "btn btn-btn btn-grad btn-submit" @click = "saveUser();"/>
</div>
</div>
<div class = "clearfix"></div>
</div>
</form>
</div>
</b-container>
</template>
Заранее спасибо и #уважение
ПРИМЕЧАНИЕ. API работает нормально. Я тестировал его в Postman.
Эй, спасибо за вашу драгоценность, вот что я получаю [Vue warn]: Ошибка в смонтированном хуке: «TypeError: this.getAllUsers не является функцией»



Я не знаю, какие ошибки вы получаете, но я вижу проблему с отправкой формы.
Некоторые изменения, которые я рекомендую:
Форма:
<form id = "app" @submit = "saveUser" method = "post" novalidate = "true"> ... </form>
Кнопка:
<input type = "submit" class = "btn btn-btn btn-grad btn-submit" />
Метод saveUser:
saveUser(event){
event.preventDefault()
this.checkForm()
if (!this.errors.length) {
var formData = this.toFormData(this.newUser);
axios.post('http...')
// rest of the code
}
}
Не могу проверить, так как у меня нет проекта, но это должно помочь.
Однако вместо описанного выше подхода я бы рекомендовал выполнять проверку на уровне ввода и позволить каждому компоненту ввода обрабатывать свою собственную логику проверки и сообщения. Кнопка отправки становится доступной только тогда, когда в форме нет ошибок. Для этого существует множество библиотек компонентов. Для пользователя было бы намного удобнее видеть ошибки в режиме реального времени, чем с помощью описанного выше способа иметь список ошибок при попытке отправить форму.
спасибо за рекомендуемые изменения и ваше время, но я также получаю эту ошибку -> [Vue warn]: ошибка в смонтированном хуке: «TypeError: this.getAllUsers не является функцией»
а затем, если я просто щелкну форму даже после внесения рекомендованных вами изменений, я получу эту ошибку -> [Vue warn]: Ошибка в обработчике v-on: «TypeError: Cannot read property 'preventDefault' of undefined», и я заполняю все поля, затем я снова нажимаю это, я получаю эту ошибку-> [Vue warn]: Ошибка в обработчике v-on: «ReferenceError: axios не определен»
Упомянутые вами ошибки говорят о том, что вы не импортировали то, на что жалуются ошибки. Что касается ошибки preventDefault, я на самом деле написал код из головы здесь, в браузере, скорее как направление, а не совсем как готовый копипаст.
Будет полезно, если вы также опубликуете сообщение об ошибке.