Question

我同时使用laravel和vue，并且试图将我的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>

我的路线

Route::any('/add-to-cart/{id}', 'PublicController@getAddToCart')->name('product.addToCart');

我的控制器功能

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

Answer 1

如果axios调用返回成功，则可以添加位置。附言未经测试的代码。

    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)
            .then(response => { location: '/'});
        },

Answer 2

我发现了我的问题。我忘了改变

return view('public.shopping-cart', compact('supplier_code'));

到

return ['redirect' => route('product.shoppingCart')];

在我的laravel控制器功能中

在Laravel中提交后获取Vue表单以转到下一页

2 个答案: