4

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

10
  • 1
    Já tentou disparar o evento blur: jQuery -> $('#el').trigger('blur') ou Vanilla -> document.querySelector('#el').dispatchEvent(new Event('blur')) ? Commented 4/10/2019 às 16:44
  • 3
    Evita usar jQuery com Vue... o que precisas fazer com Vue se pensares num cenário sem jQuery?
    – Sergio
    Commented 4/10/2019 às 16:54
  • 1
    @ValdeirPsr já tinha tentando usar isso, mas não funciona Commented 4/10/2019 às 16:55
  • 2
    Podes explicar melhor "os inputs são dinâmicos e estão em outro arquivo" e "preciso enviar os v-on através do javascript sem entrar no campo deles"?
    – Sergio
    Commented 4/10/2019 às 17:00
  • 2
    @Sergio A página de finalização de compras do OpenCart tem vários passos para a conclusão da compra (Registro, Endereço de Entrega, Endereço de Pagamento etc). Cada vez que o usuário clica em "continuar", a plataforma envia uma requisição para uma rota (ex: checkout/payment_method), que retorna um HTML daquele passo e assim sucessivamente. Commented 4/10/2019 às 18:07

1 Resposta 1

5

Resolvi o problema da seguinte maneira.

Meu objeto Vue foi atribuído a windows['_QuickCheckout'], sendo assim eu chamo ele no meu arquivo checkout.twig e atribuo os valores necessários, sem precisar utilizar o v-on:change e v-on:blur da seguinte maneira.

window['_QuickCheckoutData'].order_data.payment_address_1 = response.logradouro;
window['_QuickCheckoutData'].order_data.payment_address_2 = response.bairro;
window['_QuickCheckoutData'].order_data.payment_city = response.localidade;

Estava tentando fazer de uma maneira mais difícil, sendo que já estava pronto para uso.

Você deve fazer log-in para responder a esta pergunta.

Esta não é a resposta que você está procurando? Pesquise outras perguntas com a tag .