Я получаю 3 разных ошибки при отправке данных из формы
Первая ошибка: [Vue warn]: Ошибка в смонтированном хуке: «Ошибка типа: this.getAllUsers не является функцией»
и затем, если я проверяю проверку формы, не набирая ничего, проверка работает, но я получаю эту ошибку: [Vue warn]: Ошибка в обработчике v-on: «Ошибка типа: Невозможно прочитать свойство 'protectDefault' из неопределенного» * 1005 *
а затем я заполняю все поля и нажимаю кнопку отправки, после чего я получаю эту ошибку: [Vue warn]: ошибка в обработчике v-on: «ReferenceError: axios не определено»
Примечание: мой APIотлично работает
вот мой код
это форма
<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="saveUser" 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" class="btn btn-btn btn-grad btn-submit" />
</div>
</div>
<div class="clearfix"></div>
</div>
</form>
</div>
</b-container>
</template>
это скрипт
<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();
},
methods: {
saveUser(event){
event.preventDefault()
this.checkForm()
if(!this.errors.length) {
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.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>
Я также публикую свой код PHPпросто для справки
<?php
//Import Database
require 'base.php';
if(isset($_GET['action'])){
$action = $_GET['action'];
}
//create
if($action == 'update'){
$trx_number = $_POST['trx'];
$name = $_POST['name'];
$country = $_POST['country'];
$email = $_POST['email'];
$mobile = $_POST['mobile_no'];
$result = $con->query(" INSERT INTO `update_information` (`id`, `trx_no`, `name`, `country`, `email`, `mobile_no`) VALUES (null,'$trx_number','$name','$country','$email','$mobile') ");
if($result){
$res['message'] = "Success";
}else {
$res['error'] = true;
$res['message'] = "Error";
}
$res['update_information'] = $update_information;
}
$con->close();
//encoding into json
echo json_encode($res);
die();