I'm having some problems with this message" The POST method is not supported for this route. Supported methods: GET, HEAD.". I'm building a laravel vue tickets app, but I'm not being able to make it work, I don't know if I'm missing something. This is how my template (in short) looks like:

<div>
    <form action="/tickets/create" method="POST">
</div>

My routes (just have 1):

Route::get('/tickets/create', [\App\Http\Controllers\TicketController::class, 'create']);

How, can I show the added tickets in the same view, it's needed to add another route or change the get route to post?, I'm a bit new and I'm very very lost, haha.

I'm using a vue template, not a blade

CodePudding user response：

You have to define post method if you using method="POST"

<div>
    <form action="/tickets/create" method="POST">
</div>

Route::post('/tickets/create', [\App\Http\Controllers\TicketController::class, 'create']);

CodePudding user response：

Just change

Route::post('/tickets/create', [\App\Http\Controllers\TicketController::class, 'create']);

to

Route::match(['get', 'post'],'/tickets/create', [\App\Http\Controllers\TicketController::class, 'create']);

This is because, you are using same route for both requests. [loading the form into DOM and posting the form] .

CodePudding user response：

What if I'm missing something in my form template? Maybe a method to show the added info in the same route?, bcs I still getting the same error, idk if is something in the controller, or the routes :/, Im not pretty sure what's the problem and I'm already stucked

<template>
    <form action="/tickets/create" method="post">
        <label for="first-name"">First name</label>
           <input type="text" id="first-name" autocomplete="given-name">

        <label for="last-name">Last name</label>
           <input type="text"id="last-name" autocomplete="family-name">
                            
       <button type="submit" value="Submit">Save</button>
    </form>
</template>

<script>
    export default {
        mounted() {
            console.log('Component mounted.')
    }
}
</script>

Tried different routes to see if any of them works, but still the same:

// //Route::get('/tickets/create', [\App\Http\Controllers\TicketController::class, 'create']);
// //Route::post('/show/tickets', [\App\Http\Controllers\TicketController::class, 'show']);

//GET
Route::get('/tickets/create', [\App\Http\Controllers\TicketController::class, 'index']);
Route::get('/tickets/create/1', [\App\Http\Controllers\TicketController::class, 'show']);

//POST
Route::get('/tickets/create', [\App\Http\Controllers\TicketController::class, 'create']);
Route::post('/tickets/create', [\App\Http\Controllers\TicketController::class, 'store']);

// Route::match(['GET', 'POST'], 'tickets/create', [\App\Http\Controllers\TicketController::class, 'create']);
// Route::any('tickets/create', [\App\Http\Controllers\TicketController::class, 'create']);

This is my controller info:

class TicketController extends Controller
{
    /**
     * Display a listing of the resource.
     *
     * @return \Illuminate\Http\Response
     */
    public function index()
    {
        //
    }

    /**
     * Show the form for creating a new resource.
     *
     * @return \Illuminate\Contracts\View\View
     */
    public function create(){
        return View::make('create_ticket');
    }

    /**
     * Store a newly created resource in storage.
     *
     * @param  \Illuminate\Http\Request  $request
     * @return \Illuminate\Http\Response
     */
    public function store(Request $request)
    {
        $newTicket = new Ticket();
        $newTicket->title = $request->title;
        $newTicket->description = $request->description;
        $newTicket->priority = $request->priority;
        $newTicket->assigned_to = $request->assigned_to;
        $newTicket->status = Ticket::TICKET_OPEN;
        $newTicket->save();
    }

    /**
     * Display the specified resource.
     *
     * @param  \App\Models\Ticket  $ticket
     * @return \Illuminate\Http\Response
     */
    public function show(Ticket $ticket)
    {
        //
    }

    /**
     * Show the form for editing the specified resource.
     *
     * @param  \App\Models\Ticket  $ticket
     * @return \Illuminate\Http\Response
     */
    public function edit(Ticket $ticket)
    {
        //
    }

    /**
     * Update the specified resource in storage.
     *
     * @param  \Illuminate\Http\Request  $request
     * @param  \App\Models\Ticket  $ticket
     * @return \Illuminate\Http\Response
     */
    public function update(Request $request, Ticket $ticket)
    {
        //
    }

    /**
     * Remove the specified resource from storage.
     *
     * @param  \App\Models\Ticket  $ticket
     * @return \Illuminate\Http\Response
     */
    public function destroy(Ticket $ticket)
    {
        //
    }
}