Stack Overflow на русском Asked on November 20, 2021
При попытке отправки формы выскакивает ошибка:
at Errors.has (vue-app.js:7)
at Proxy.eval (eval at makeFunction (vue.js:8238), <anonymous>:3:671)
at Vue$3.Vue._render (vue.js:2954)
at Vue$3.<anonymous> (vue.js:2191)
at Watcher.get (vue.js:1656)
at Watcher.run (vue.js:1725)
at flushSchedulerQueue (vue.js:1543)
at Array.<anonymous> (vue.js:475)
at nextTickHandler (vue.js:424)
logError @ vue.js:437
Promise.catch (async)
timerFunc @ vue.js:439
queueNextTick @ vue.js:480
queueWatcher @ vue.js:1593
update @ vue.js:1715
notify @ vue.js:582
reactiveSetter @ vue.js:809
record @ vue-app.js:22
onFail @ vue-app.js:71
Promise.catch (async)
submit @ vue-app.js:61
onSubmit @ vue-app.js:88
boundFn @ vue.js:130
submit @ VM267:3
(anonymous) @ vue.js:2750
Не знаю, в чём конкретно заключается проблема и почему в hasOwnProperty передаётся undefined.
mainpage.blade.php:
<div id="app">
<form method="post" name="boocking" action="/clients" @submit.prevent="onSubmit" @keydown="form.errors.clear($event.target.name)">
<div class = 'name'>
<label for = 'name'>Представьтесь:</label>
<input type = 'text' id = "client" name="client" v-model = "form.client">
<span class ="help is-danger" v-if="form.errors.has('client')" v-text="form.errors.get('client')"></span>
</div>
<div class = 'phone'>
<label for = 'phone'>Номер телефона:</label>
<input type = 'text' id = "phone" name="phone" v-model = "form.phone">
<span class ="help is-danger" v-if="form.errors.has('phone')" v-text="form.errors.get('phone')"></span>
</div>
<div class = 'email'>
<label for = 'email'>Email:</label>
<input type = 'text' id = "email" name="email" v-model = "form.email">
<span class ="help is-danger" v-if="form.errors.has('email')" v-text="form.errors.get('email')"></span>
</div>
<div class = 'submitting'>
<input type = 'submit' name = 'submitting-botton' value = 'Отправить заказ' :disabled = "form.errors.any()">
</div>
</form>
vue-app.js:
class Errors {
constructor() {
this.errors = {};
}
has(field) {
return this.errors.hasOwnProperty(field);
}
any() {
return Object.keys(this.errors).length > 0;
}
get(field) {
if(this.errors[field]) {
return this.errors[field][0];
}
}
record(errors) {
this.errors = errors;
}
clear(field) {
if (field) {
delete this.errors[field];
return;
}
this.errors = {};
}
}
class Form {
constructor(data) {
this.originalData = data;
for (let field in data) {
this[field] = data[field];
}
this.errors = new Errors();
}
data() {
let data = Object.assign({}, this);
delete data.originalData;
delete data.errors;
return data;
}
reset() {
for(let field in this.originalData) {
this[field] = '';
}
}
submit(requestType, url) {
axios[requestType](url, this.data())
.then(this.onSuccess.bind(this))
.catch(this.onFail.bind(this))
}
onSuccess(response) {
alert(response.data.message);
this.errors.clear();
this.reset();
}
onFail(error) {
this.errors.record(error.response.data.errors);
}
}
new Vue({
el: '#app',
data: {
form: new Form({
client: '',
phone: '',
email: ''
})
},
methods: {
onSubmit() {
this.form.submit('post', '/clients');
}
}
});
Заранее спасибо за помощь.
Get help from others!
Recent Answers
Recent Questions
© 2024 TransWikia.com. All rights reserved. Sites we Love: PCI Database, UKBizDB, Menu Kuliner, Sharing RPP