всем привет. Есть простой лендос с формой в блоке.
<div id="form">не важно</div>
и vue приложение простенькое
'use strict';
const DEFAULT_FORM = {
form: {
firstname: '',
lastname: '',
email: '',
phone: '',
company: '',
partner: '',
city: '',
comment: '',
},
validation: {
firstname: true,
lastname: true,
email: true,
phone: true,
company: true,
partner: true,
city: true,
}
};
new Vue({
el: '#form',
data: function () {
return {
form: this.cloneObject(DEFAULT_FORM.form),
validation: this.cloneObject(DEFAULT_FORM.validation),
isSendForm: false
};
},
computed: {
isValidForm: function() {
let valid = this.validation;
valid.firstname = this.form.firstname.trim().length > 3;
valid.lastname = this.form.lastname.trim().length > 3;
let emailExp = /^[a-z0-9!#$%&'*+\/=?^_`{|}~.-]+@[a-z0-9]([a-z0-9-]*[a-z0-9])?(\.[a-z0-9]([a-z0-9-]*[a-z0-9])?)*$/i;
let regexp = new RegExp(emailExp);
valid.email = regexp.test(this.form.email);
let phoneExp = /^\+[\d\s\(\)]{5,}$/;
regexp = new RegExp(phoneExp);
valid.phone = regexp.test(this.form.phone);
valid.company = this.form.company.trim().length > 3;
valid.partner = this.form.partner.trim().length >= 2;
valid.city = this.form.city.trim().length >= 2;
return valid.firstname &&
valid.lastname &&
valid.email &&
valid.phone &&
valid.company &&
valid.partner &&
valid.city;
},
},
methods: {
sendForm : function () {
if (this.isValidForm) {
let options = {
method: 'POST',
url: '/send',
data: this.toParam(this.form)
};
axios(options).then((_json) => {
this.isSendForm = true;
});
}
},
toParam : function (_object, _prefix) {
let stack = [];
for (let key in _object) {
let value = _object[key];
key = _prefix ? _prefix + '[' + key + ']' : key;
let typeValue = (typeof value);
if (value === null) {
value = encodeURIComponent(key) + '=';
} else if (typeValue !== 'object') {
if (typeValue == 'boolean' || typeValue == 'undefined') {
value = value ? 1 : 0;
} else {
if (value == 'true') {
value = 1;
} else if (value == 'false') {
value = 0;
}
value = encodeURIComponent(value);
}
value = encodeURIComponent(key) + '=' + value;
} else {
value = this.toParam(value, key);
}
stack.push(value);
}
return stack.join('&');
},
cloneObject : function (_object, _destination = null) {
let result = JSON.parse(JSON.stringify(_object));
if (_destination !== null) {
for (let key in _destination) {
delete _destination[key];
}
for (let key in result) {
_destination[key] = result[key];
}
}
return result;
},
},
});
В итоге загружаешь страницу все норм. И VueDevtools в хроме показывает что норм. А как только жмакаешь F5 и перезагружаешь страницу VueDevtools показывает, что Vue нету и пропадает блок с id="form". (как будто v-if). В консоли все норм
Средний
