php LiveWire和Laravel组件：Html未显示

67up9zun 于 2023-10-15 发布在 PHP

关注(0)|答案(2)|浏览(108)

我正在使用Laravel v10，在我的项目中，我尝试了以下方法来使用livewire制作自定义组件。
我跑了：php artisan make:component CounterDisplay
创建了一个新文件，名为：resources/views/components/counter-display.blade.php是这样的：

<div>
    Counter Value: {{ $count }}
</div>

然后运行php artisan make:livewire Counter创建一个新的livewire组件（app/Http/Livewire/Counter.php）：

// app/Livewire/Counter.php
namespace App\Livewire;

use Livewire\Component;

class Counter extends Component
{
    public $count = 0;

    public function increment()
    {
        $this->count++;
    }

    public function render()
    {
        return view('livewire.counter');
    }
}

然后创建一个新的刀片文件resources/views/livewire/counter.blade.php：

<!-- resources/views/livewire/counter.blade.php -->
<div>
    <button wire:click="increment">Increment</button>
    <x-counter-display :count="$count" />
</div>

通过这条路线：

use App\Livewire\Counter;

Route::get('/counter', function () {
    return view('counter', ['counter' => Counter::class]);
});

并创建了一个名为counter.blade.php的刀片文件：

<!-- resources/views/counter.blade.php -->
@extends('layouts.app')

@section('content')
    <livewire:counter />
@endsection

现在当我访问**/counter**时，什么都没有显示！
但是，当我在counter-display.blade.php上检查dd时，：

@dd(2) <!-- Properly returns 2 but the html not show up -->
<div>
    Counter Value: {{ $count }}
</div>

它将显示输出，但奇怪的是，即使**计数器值：**文本没有打印，而没有错误。
所以如果你知道这是怎么回事，请告诉我...
我真的被这个卡住了！

php

来源：https://stackoverflow.com/questions/77225411/livewire-laravel-component-html-not-show-up

2条答案

按热度按时间

bqujaahr1#

您可以将刀片上的livewire组件称为

@livewire('counter')

赞(0）回复(0）举报 2023-10-15

kb5ga3dv2#

您已使用以下方式生成 CounterDisplay：
php artisan make：component CounterDisplay
所以我假设您同时拥有 counter-display.blade.php 和 /View/Components/CounterDisplay.php
要让$counter到达 counter-display.blade.php，必须在 CounterDisplay.php 的构造函数中管理它：

<?php

namespace App\View\Components;

use Closure;
use Illuminate\Contracts\View\View;
use Illuminate\View\Component;

class CounterDisplay extends Component
{
    public function __construct(public int $count)
    {
    }

    public function render(): View|Closure|string
    {
        return view('components.counter-display');
    }
}

或者如果你更喜欢“经典”的方式：

// .....

class CounterDisplay extends Component
{
    public int $count;

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

    // .....
}

否则，您可以删除 /View/Components/CounterDisplay.php，并直接在 counter-display.blade.php 视图中声明$count属性：

@props (['count'])

<div>
    Counter Value: {{ $count }}
</div>

完成这些修改后，建议运行：
composer 转储自动加载
php artisan view：clear

赞(0）回复(0）举报 2023-10-15

我来回答

php LiveWire和Laravel组件：Html未显示

2条答案

相关问题

热门标签

最新问答