Nikki
7 months ago
77
3
Vue

Getting a vue form to go to the next page after submit

Posted 7 months ago by Nikki

I'm using both laravel and vue and I'm trying to get my vue form to go to another page when I've submitted, but the problem is that once it's submitted it refreshes and goes back to the page it's on instead of the other page.

When I check my network tab in the dev tools, it posted to the right page but it doesn't show up in the browser

This is my vue

<template>
    <div class="container">
        <div class="row justify-content-center">
            <div class="col-md-8">
                <div class="card">
                    <div class="card-header">Example Component</div>

                    <div class="card-body">
                        I'm an Supplier Code Selection component.
                        <br>

                        <form @submit.prevent="submit">
                            <label for="parent-product">Parent Product</label>
                            <select name="parent-product" id="parent-product" class="form-control" v-model="selected_parent">
                                <option>Please select your code</option>
                                <option v-for="product in products" :value="product.id">
                                    {{ product.supplier_code }}
                                </option>

                                    <option v-for="child in children" :value="child.id">
                                        {{ child.supplier_code }}
                                    </option>
                            </select>

                            <input type="submit" class="btn btn-primary" value="Submit">
                        </form>
                    </div>
                </div>
            </div>
        </div>
    </div>
</template>

<script>
    import axios from 'axios'

    export default {
        props: [
            'products',
            'children',
            'selected_parent'
        ],

        mounted() {
            console.log('Component mounted.')
        },

        methods: {
            submit(){
                var formData = new FormData();

                console.log('this is the select box - '+this.selected_parent);
                formData.append('parent-product', this.selected_parent);

                return axios.post('/add-to-cart/'+this.selected_parent, formData);
            },
        },
    }
</script>

My route

Route::any('/add-to-cart/{id}', '[email protected]')->name('product.addToCart');

My controller function

public function getAddToCart(Request $request, $id)
{
    $menus_child = Menu::where('menu_id', 0)->with('menusP')->get();
    $contacts = Contact::all();

    $product = Product::find($id);

    $supplier_code = $request->supplier_code;

    $oldCart = Session::has('cart') ? Session::get('cart') : null;

    $cart = new Cart($oldCart);
    $cart->add($product, $product->id, $supplier_code);

    $request->session()->put('cart', $cart);

    return view('public.shopping-cart', ['products' => $cart->items, 'totalPrice' => $cart->totalPrice, 'menus_child' => $menus_child, 'contacts' => $contacts, 'supplier_code' => $supplier_code]);
}

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