Calling a v-on by Javascript

Asked

Viewed 251 times

4

Good people, I have a form that uses Vue, where every time I write something it makes a request in the backend to save the data with the v-on:change and when I leave the field he does the same thing with the v-on:blur I am using Opencart and I can not do otherwise, so I need the following.

I have my ZIP code field that I request on the road and fill in the data of the other fields (address, neighborhood, city, state) and after that I focus on the field of the number. But when I exit input number it resets the fields I filled in without going through them.

How would I manage to send the v-on:change and v-on:blur through Javascript?

My codes below:

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
        }
      });
    });

Example of my ZIP input, others arrive the same way

<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"/>

In the file you send to the backend by Vue, you have the following functions change() and chekcSave(); where checkSave calls the save and saves the data in the backend and then calls the update to send the data in the fields again.

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,
                    password2: this.password2,
                    same_address: this.same_address,
                    newsletter: this.newsletter,
                    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,
                    reward: this.reward
                },
                success: function (json) {
                    this.update(json, confirm);
                }.bind(this)
            });
        },
        update: function (json, confirm) {
            if (json.response.redirect) {
                window.location = json.response.redirect;
            } else {
                this.custom_fields = json.response.custom_fields;
                this.shipping_methods = json.response.shipping_methods;
                this.payment_methods = json.response.payment_methods;
                this.shipping_zones = json.response.shipping_zones;
                this.payment_zones = json.response.payment_zones;
                this.order_data.shipping_code = json.response.order_data.shipping_code;
                this.order_data.payment_code = json.response.order_data.payment_code;
                this.order_data.shipping_country_id = json.response.order_data.shipping_country_id;
                this.order_data.payment_country_id = json.response.order_data.payment_country_id;
                this.order_data.shipping_zone_id = json.response.order_data.shipping_zone_id;
                this.order_data.payment_zone_id = json.response.order_data.payment_zone_id;
                this.totals = json.response.totals;
                this.products = json.response.products;
                this.stock_warning = json.response.stock_warning;
                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();
                    }
                }
            }
        },

When he returns from update he resets the fields that I 'did not modify' entering them into themselves, for I have set through jQuery. How I would send this data through Javascript or jQuery?

I put the full code in the Pastebin: https://pastebin.com/8vcxrwNG

javascript jquery vue.js opencart
  • 1

    Already tried to trigger the event blur: jQuery -> $('#el').trigger('blur') or Vanilla -> document.querySelector('#el').dispatchEvent(new Event('blur')) ?

  • 3

    Avoid using jQuery with Vue... what you need to do with Vue if you think of a scenario without jQuery?

  • 1

    @Valdeirpsr had already tried to use this, but it doesn’t work

  • @Sergio It may be without jQuery, problem that inputs are dynamic and are in another file, when I pass input by input works normally. Problem is I need to send the v-on through javascript without entering their field.

  • I’m adapting an opencart theme and in this part of the theme it uses Vue to do this service, but I never used Vue and do not understand very well how it works to do this

  • 2

    Can you explain better "inputs are dynamic and are in another file" and "I need to send the v-ons via javascript without entering their field"?

  • The form fields are in an address.Twig file, where you have all the fields (the opencart defaults and the custom ones) where you cannot edit this file with js. where I can edit it is the checkout.Twig file because the.Twig address is loaded into it. Where the checkout file is mounted.js. I don’t know how I would access them

  • 2

    @Sergio The checkout page of Opencart has several steps to completion of the purchase (Registration, Delivery Address, Payment Address etc). Each time the user clicks "continue", the platform sends a request for a route (ex: checkout/payment_method), that returns a HTML of that step and so on.

  • @Andrelacomski If possible put the full code on Pastebin and put the link here.

  • The following is the link to the Pastebin: https://pastebin.com/8vcxrwNG Posted in the question also

Show 5 more comments

1 answer

5


I solved the problem as follows.

My Vue object has been assigned to windows['_QuickCheckout'], so I call him in my file checkout.twig and assign the necessary values without having to use the v-on:change and v-on:blur as follows.

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;

I was trying to do it in a more difficult way, being already ready for use.

Browser other questions tagged javascript jquery vue.js opencart

You are not signed in. Login or sign up in order to post.