为什么 laravel 组件没有在刀片文件中呈现？

Question

在我的 Laravel 8 / tailwindcss 2 / Alpinejs 2.8 应用程序中我使用命令

创建 laravel 组件

php artisan make:component  Admin/ListingHeader

但在我的一个 blade 文件中调用此组件，例如

<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

这个组件没有渲染，正如我在浏览器中看到的那样：https://prnt.sc/zulwm0

我想我在

中设置了一个有效路径

<x-admin.listing-header

因为生成的模板位于 resources/views/components/admin/listing-header。blade.php

我更喜欢创建 laravel 组件，但为什么没有渲染？如何解决？

修改块：

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');
    }
}

和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>

修改块#2：

我做了一些测试简化示例并删除了我创建的组件一个新组件，但不在带有命令的管理目录下：

PHP artisan make: component  ListingHeader

然后我填写了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');
    }
}

并在 /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>

并写入 parent index.blade.php :

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

我看到呈现的文本正常，有效值为 $iconHint var 但是如果在 parent index.blade.php 中传递 laravel 值：

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

组件文本中没有使用双参数渲染组件：https://prnt.sc/103oq9y

为什么这样抓不到？如果通过哪种方式传递参数？我想组件在 server-side 上渲染并且不可能出现高山混淆...

谢谢！

Answer 1

看起来错误出现在 space 对中：

  :key-name= "KeyValue"

没有 spaces 它工作正常 "

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

为什么 laravel 组件没有在刀片文件中呈现？

Why laravel components is not rendered inblade file?

laravel

tailwind-css

alpine.js