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:

IndexController using PageModel passes $pageid to index.blade view
index.blade passes $pageid to x-insert-section component
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.

William Garcia · Accepted Answer · 2021-01-23 18:17:04Z

5

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.

answered Jan 23, 2021 at 18:17

William Garcia

1111 gold badge2 silver badges12 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

Saravjeet Singh · Accepted Answer · 2021-05-26 10:58:42Z

4

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

use @props in a component that doesn't have any controller,
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; }

answered May 26, 2021 at 10:58

Saravjeet Singh

661 silver badge5 bronze badges

1 Comment

shaedrich Over a year ago

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

Justin · Accepted Answer · 2023-09-29 17:55:31Z

0

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.

answered Sep 29, 2023 at 17:55

Justin

2877 silver badges20 bronze badges

Collectives™ on Stack Overflow

Cannot pass variable to Laravel x-component

3 Answers 3

Comments

1 Comment

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

Comments

1 Comment

Comments

Your Answer

Sign up or log in

Post as a guest

Related