eugenevdm
2 months ago
151
0
Vue

Submit VueJS form with child component values post Axios call

Posted 2 months ago by eugenevdm

I have a VueJS form with dynamic variables that I want to populate just after an Axios Ajax call that fetches essential parameters from the server. Because the child component is included early on the page, none of the form values are populated as one would expect. They are all blank.

If you block the Axios call from submitting the page, and I submit the Axios call again, the form is populated.

I guess I'm fishing for a way to "force" Vuejs to include the child component just after I've made the Axios call.

Below is a snippet of the form. I use a "ref" tag as shown later to submit the form. The child is dynamically populated after an Axios call.

<template>

    <div v-if="$store.state.cartItems.length > 0">

        <form ref="form"
              @submit="checkForm"
              method="post" :action="gateway.destination">

            <input type="hidden" name="_token" :value="csrf">
            <input type="hidden" name="order_id" ref="order_id">
            <input type="hidden" name="payment_method" ref="payment_method">

            <payfast-component
                    v-if="payment_method ==='payfast'"
                    :gateway="gateway"
                    :user="user"
                    :order="order">
            </payfast-component>

Here is where I submit the form:

// Post email, paymentMethod, and the cart data so that a new order is placed
                axios.post('/api/v1/order', data).then(res => {
                    eventListener = false;

                    console.log(res.data.data.order.id);

                    this.order = res.data.data.order;
                    this.gateway = res.data.data.gateway;

                    // Clear the cart
                    window.localStorage.setItem('cartItems', '');
                    window.localStorage.setItem('cartCount', '');
                    // Set order_id hidden value
                    this.$refs.order_id.value = this.order.id;

                    // Submit the form
                    this.$refs.form.submit();

                    this.disableSubmitButton = false;

                    return true;

So the problem is this.$refs.form.submit(); submits the form, but all the values are blank.

If I disable submission, and then press submit again, all the values are populated.

So the child component's data isn't included but I would like it to be included.

I'm open to doing this another way as well but struggled to do it via a controller.

Please sign in or create an account to participate in this conversation.