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 }} @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!