Cannot pass variable to Laravel x-component

Question

I am building a webpage in Laravel 8 using x-components in some places. A component is a modal present in all pages but whose content must change depending on the page invoking it.

My idea was the following:

1. IndexController using PageModel passes $pageid to index.blade view
2. index.blade passes $pageid to x-insert-section component
3. x-insert-section component uses it in a @switch directive to show the required content per page

The problem is that x-insert-section doesn't seem to receive any value in $pageid.

The code is the following:

My IndexController.php

namespace App\Http\Controllers;

use App\Http\Controllers\Controller;
use App\Models\Page;
use App\Models\Entry;
use Illuminate\Http\Request;

class IndexController extends Controller
{
    public function init(Request $request)
    {

        $page = Page::where('slug', '/')->first();

        return view('index', [
            'page' => $page,
            'entries' => Entry::where('page', $page->id)->get(),
            'pageid' => $page->id
        ]);
    }
}

The part of index.blade.php where the x-components are loaded

    <x-insert-section :pageid="$pageid"></x-insert-section>
    <x-insert-jumbo-image :pageid="$pageid"></x-insert-jumbo-image>

InsertSection.php Component

<?php

namespace App\View\Components;

use Illuminate\View\Component;

class InsertSection extends Component
{

    public function __construct(){}

    public $pageid;

    public function render()
    {
        return view('components.insert-section');
    }
}

The view of the insert-section.blade.php (Switch contents have been replaced by comments to reduce code length)

<div class="modal fade" id="create-modal" tabindex="-1" role="dialog" aria-hidden="true">
    <div class="modal-dialog modal-dialog-centered" role="document">
        <div class="modal-content">
        <div class="modal-header">
            <h5 class="modal-title" id="modal-entry-title"></h5>
            <button type="button" class="close" data-dismiss="modal" aria-label="Close">
            <span aria-hidden="true">&times;</span>
            </button>
        </div>
        <div class="modal-body">

        @switch($pageid)
            @case('1')
                      <!-- Form type 1 -->
                @break

            @case('3')
                      <!-- Form type 2 -->
                @break

            @default
               Default Case
        @endswitch

        </div>
        <div class="modal-footer">
            <button id="confirm-entry" type="submit" form="create-form" class="btn btn-primary">{{$pageid}}</button>
        </div>
        </div>
    </div>
</div>

NOTE: I have tried using both '1' and 1 as values for the switch case, even sending harcoded strings, none worked

Finally, the result on screen when the modal is called. No form is loaded and the switch resolves to default case.

Screenshot of modal

Any help would be greatly appreciated.

Rupe

Answer 1

Well it turns out I have the solution after reading the Docs (bless them, damn my poor reading)

The part missing was the contructor receiving the variables, therefore the code changes this way.

InsertSection.php Component

From:

    public function __construct(){}

    public $pageid;

To:

    public $pageid;

    public function __construct($pageid)
    {
        $this->pageid = $pageid;
    }

I know I know, makes a lot of sense but I guess I'll remember it for next time.

Rupe

Answer 2

If you want to pass a variable to the component in Laravel, there are two ways to do this,

1. use @props in a component that doesn't have any controller,

2. But in your code you have a controller, so simply in your controller's constructor initialized your variable.

   public $pageid;

   public function __construct($pageid) { $this->pageid = $pageid; }

Zippy

Thanks for your answer but isn't the second one the same as in the other answer? – Euphrosyne

Answer 3

Also, please pay attention to https://laravel.com/docs/10.x/blade#casing.

Passing a variable to a component such as $page_id won't work. It should be $pageid or $pageId.

Dowager