Bastet
252
2
Vue

Vue form not hitting controller function

Posted 2 months ago by Bastet

I'm not sure if this is a vue question or a laravel one, but I've created a page that a user can select an item to add to a cart. The page in normal laravel but it has a vue component for the select box. The problem I'm having is that even though in my dev tools it's pointing to the correct place I'm not hitting the controller function.

Here is my item.blade.php

@extends('layouts.public')
@section('content')
    <div class="content_wrapper">
        @foreach($single_item as $item)
            <div class="row single_product_wrapper">
                <div class="col-lg-8 col-md-12-col-sm-12 product_details">
                    @foreach($parent_item as $parent)
                        <table style="width: 100%; height: 95px;" border="2" cellspacing="5" cellpadding="5">
                            <tbody>
                                <tr style="text-align: center;">
                                    <td>
                                        <strong>Code</strong>
                                    </td>

                                    @if(!empty($parent->title))
                                        <td>
                                            <strong>Title</strong>
                                        </td>
                                    @endif

                                    @if(!empty($parent->description))
                                        <td>
                                            <strong>Description</strong>
                                        </td>
                                    @endif

                                    @if(!empty($parent->price))
                                        <td>
                                            <strong>Price</strong>
                                        </td>
                                    @endif
                                </tr>

                                <tr style="text-align: center;">
                                    @if(!empty($parent->item_code))
                                        <td>
                                            {{ $parent->item_code }}
                                        </td>
                                    @endif

                                    @if(!empty($parent->title))
                                        <td>
                                            {{ $parent->title }}
                                        </td>
                                    @endif

                                    @if(!empty($parent->description))
                                        <td>
                                            {{ $parent->description }}
                                        </td>
                                    @endif

                                    @if(!empty($parent->price))
                                        <td>
                                            {{ $parent->price }}
                                        </td>
                                    @endif
                                </tr>
                                
                                @if(count($parent->parent))
                                    @foreach($parent->parent as $child)
                                        <tr style="text-align: center;">
                                            @if(!empty($child->item_code))
                                                <td>
                                                    {{ $child->item_code }}
                                                </td>
                                            @endif

                                            @if(!empty($child->title))
                                                <td>
                                                    {{ $child->title }}
                                                </td>
                                            @endif

                                            @if(!empty($child->description))
                                                <td>
                                                    {{ $child->description }}
                                                </td>
                                            @endif

                                            @if(!empty($child->price))
                                                <td>
                                                    {{ $child->price }}
                                                </td>
                                            @endif
                                        </tr>
                                    @endforeach
                                @endif
                            </tbody>
                        </table>
                    @endforeach

                    <!-- BEGIN ADD TO CART FORM -->
                    <div id="app">
                        @foreach($parent_item as $parent)
                            <item-selection :items="{{ $parent_item }}" :children="{{ $parent->parent }}"></item-selection>
                        @endforeach
                    </div>
                    <!-- END ADD TO CART FORM -->
                </div>
            </div>
        @endforeach
    </div>
@stop

and this is my vue

<template>
    <div>
        <form @submit.prevent="submit">
            <div class="row">
                <div class="col-lg-12 item_select">
                    <select name="item_code" id="item_code" class="form-control mb-2 mt-10" v-model="item_parent" required>
                        <option :value="item_parent">Please select your item</option>
                        <option v-for="item in items" :value="item.id">
                            {{ item.item_code }}
                        </option>

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

            <input type="submit" class="btn btn-dark btn-lg btn-block" value="Add To Cart">
        </form>
    </div>
</template>

<script>
    import axios from 'axios'

    export default {
        props: [
            'items',
            'children',
            'item_parent'
        ],

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

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

                formData.append('item_code', this.item_parent);

                return axios.post('/add-to-cart/'+this.item_parent, formData)
                            .then(
                                function(response)
                                {
                                     console.log(response.data.redirect);
                                     window.location = response.data.redirect;
                                }
                            );
            },
        },
    }
</script>

and this is my function in my controller

public function getAddToCart(Request $request, $id)
{
    echo "Im here at getAddToCart";
}

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