Why laravel components is not rendered inblade file?

Viewed 1343

in my Laravel 8 / tailwindcss 2 / Alpinejs 2.8 app I create laravel component with a command

php artisan make:component  Admin/ListingHeader

but calling this component in one of my blade files, like

<div class="editor_listing_wrapper" x-data="adminCategoryListingComponent()">
    111111<x-admin.listing-header
    :icon-hint="'Categories of the app'"
    :items-length= "{{ count($categories) }}"
    :items-total-count= "{{ $totalCategoriesCount }}"
    />99999999

This component is not rendered, as I see in the browser: https://prnt.sc/zulwm0

I suppose I set a valid path in

<x-admin.listing-header

as the generated template is located as resources/views/components/admin/listing-header.blade.php

I prefer to create laravel components, but why it is not rendered? How to fix it?

MODIFIED BLOCK:

app/View/Components/Admin/ListingHeader.php:
<?php

namespace App\View\Components\Admin;

use Illuminate\View\Component;

class ListingHeader extends Component
{
    public $iconHint= '';
    public $itemsLength= 0;
    public $itemsTotalCount= 0;
    /**
     * Create a new component instance.
     *
     * @return void
     */
    public function __construct(string $iconHint, int $itemsLength, int $itemsTotalCount)
    {
        $this->iconHint= $iconHint;
        $this->itemsLength= $itemsLength;
        $this->itemsTotalCount= $itemsTotalCount;
    }

    public function render()
    {
        return view('components.admin.listing-header');
    }
}

and resources/views/components/admin/listing-header.blade.php :

<div class="p-2 pt-6 mb-4 flex">
    <div class="w-10/12 justify-start align-top">
        <h3 class="m-1 text-center flex items-center d1">
            <x-icon-svg :icon="'category'" :title="'{{ $iconHint }}'"></x-icon-svg>
            <span class="ml-2">
                        {{ $itemsLength }}&nbsp;@choice('category|categories', $itemsLength) from {{ $itemsTotalCount }}
                        </span>
        </h3>
    </div>
    <div class="w-2/12 m-1 flex justify-end items-center align-top d2">
                    <span @click="refreshCategoriesListing()" class="mr-5">
                        <x-icon-svg :icon="'refresh'" :title="'Refresh categories listing'" ></x-icon-svg>
                    </span>
        <span onclick="document.location.href='{{ route('admin.categories.create') }}'">
                        <x-icon-svg :icon="'add'" title="Add new category" ></x-icon-svg>
                    </span>
    </div>
</div>

MODIFIED BLOCK # 2:

I made some tests simplified example and removing component I created a a new component, but not under admin directory with a command :

PHP artisan make: component  ListingHeader

and I filled in app/View/Components/ListingHeader.php :

<?php

namespace App\View\Components;

use Illuminate\View\Component;

class ListingHeader extends Component
{

    public $iconHint= '';
    public $itemsLength= 0;
    public $itemsTotalCount= 0;

    public function __construct(string $iconHint= '', int $itemsLength= 0, int $itemsTotalCount= 0)
    {
        $this->iconHint= $iconHint;
        $this->itemsLength= $itemsLength;
        $this->itemsTotalCount= $itemsTotalCount;
    }

    /**
     * Get the view / contents that represent the component.
     *
     * @return \Illuminate\Contracts\View\View|string
     */
    public function render()
    {
        \Log::info(  varDump(-1, ' -1 render ListingHeader::') );
        return view('components.listing-header');
    }
}

and in /resources/views/components/listing-header.blade.php :

<div>
    <h1>resources/views/components/listing-header.blade.php::{{ $iconHint  }}</h1>
    <!-- Very little is needed to make a happy life. - Marcus Antoninus -->
</div>

and writing in parent index.blade.php :

111111<x-listing-header
    :icon-hint="'Categories of the app'"
/>222222

I see rendered text ok with valid value of $iconHint var But if in parent index.blade.php to pass laravel value :

111111<x-listing-header
    :icon-hint="'Categories of the app'"
    :items-length= "{{ count($categories) }}"
/>222222

The component is not rendered with double params inside of the component text: https://prnt.sc/103oq9y

Can not catch why so? If which way to pass the parameter? I suppose component rendered on server-side and no alpine confusion is possible...

Thanks!

1 Answers

looks like error was in space in a pair:

  :key-name= "KeyValue"

Without spaces it works ok "

    <x-listing-header
        :icon-hint="'Categories of the app'"
        :items-length="count($categories)"
        :items-total-count="$totalCategoriesCount"
    />
Related