Bom pessoal, tenho um form que utiliza Vue, onde toda vez que eu escrevo alguma coisa ele faz um requisição no backend para salvar os dados com o v-on:change
e quando saio do campo ele faz a mesma coisa com o v-on:blur
Estou utilizando OpenCart e não tenho como fazer de outra maneira, então preciso do seguinte.
Tenho meu campo CEP que faço requisição no viacep e preencho os dados dos outros campos (endereço, bairro, cidade, estado) e após isso eu foco no campo do número. Porém quando saio do input número ele reseta os campos que eu preenchi sem passar por eles.
Como eu faria para conseguir mandar o v-on:change
e v-on:blur
através do JavaScript?
Meus códigos abaixo:
Requisição após sair do campo CEP
$("#input-payment-postcode").focusout(function(){
$.ajax({
url: 'https://viacep.com.br/ws/'+$(this).val()+'/json/unicode/',
dataType: 'json',
success: function(response){
$("#input-payment-address-1").val(response.logradouro);
$("#input-payment-address-2").val(response.bairro);
$("#input-payment-city").val(response.localidade);
switch (response.uf) { // apaguei os outros case para diminuir o tamanho
case 'AC':
$("#input-payment-zone").val(440);
break;
}
$("#input-payment-custom-field3").focus(); // campo número
}
});
});
Exemplo do meu input CEP, os outros cheguem a mesma forma
<input tabindex='9' v-model.lazy="order_data.{{ type }}_postcode" v-on:blur="checkSave()" v-on:change="change()" type="text" name="postcode" value="" placeholder="{{ entry_postcode }}" id="input-{{ type }}-postcode" class="form-control"/>
No arquivo que faz envia para o backend por Vue, tem as seguintes funções change()
e chekcSave()
; onde o checkSave chama o save
e salva os dados no backend e depois chama o update
para mandar os dados nos campos novamente.
change: function () {
this.$data.changed = true;
},
changeAddressType: function (type, value) {
if (value === 'new') {
this.$data.order_data[type + '_address_id'] = '';
} else {
this.$data.order_data[type + '_address_id'] = this.default_address_id;
}
},
checkSave: function (confirm) {
if (this.$data.changed === true) {
this.$data.changed = false;
this.save(confirm);
}
},
save: function (confirm) {
this.error = {};
this.ajax({
url: 'index.php?route=journal3/checkout/save' + (confirm ? '&confirm=true' : ''),
data: {
account: this.account,
order_data: this.order_data,
password: this.password,
privacy: this.privacy,
agree: this.agree,
payment_address_type: this.payment_address_type,
shipping_address_type: this.shipping_address_type,
coupon: this.coupon,
voucher: this.voucher
},
success: function (json) {
this.update(json, confirm);
}.bind(this)
});
},
update: function (json, confirm) {
if (json.response.redirect) {
window.location = json.response.redirect;
} else {
this.totals = json.response.totals;
this.products = json.response.products;
this.vouchers = json.response.vouchers;
this.data.total = json.response.total;
this.session = json.response.session;
this.error = json.response.error;
$('#cart-total').html(json.response.total);
$('.cart-content > ul').html($(json.response.cart).find('.cart-content > ul').html());
$('#cart-items.count-badge').html(json.response.total_items);
if (json.response.error) {
$('#quick-checkout-button-confirm').button('reset');
try {
console.error(JSON.stringify(json.response.error, null, 2));
} catch (e) {
}
if (json.response.error.payment_code) {
alert(json.response.error.payment_code);
}
if (json.response.error.shipping_code) {
alert(json.response.error.shipping_code);
}
setTimeout(function () {
try {
$('html, body').animate({ scrollTop: $('.form-group .text-danger').closest('.form-group').offset().top - 50 }, 'slow');
} catch (e) {
}
}, 300);
} else {
if (confirm) {
var btns = ['input[type="button"]', 'input[type="submit"]', 'button[type="submit"]', '#button-confirm', '.buttons a'];
var $btn = $('.quick-checkout-payment').find(btns.join(', ')).first();
if ($btn.attr('href')) {
window.location = $btn.attr('href');
} else {
$btn.trigger('click');
}
} else {
this.payment();
}
}
}
},
Quando ele retorna do update
ele reseta os campos que eu 'não modifiquei' entrando neles em si, pois eu setei através do jQuery.
Como eu faria para mandar esses dados através do JavaScript ou jQuery?
Coloquei o código completo no pastebin: https://pastebin.com/8vcxrwNG
blur
: jQuery ->$('#el').trigger('blur')
ou Vanilla ->document.querySelector('#el').dispatchEvent(new Event('blur'))
?checkout/payment_method
), que retorna um HTML daquele passo e assim sucessivamente.