在循环中渲染 livewire 组件 和顺风CSS

问题描述

我想用 livewire 组件循环每首 $song。万事大吉，买造型就这样坏了：

重现步骤

验证部分.PHP

<?PHP

namespace App\Http\Livewire;

use App\Models\Song;
use Livewire\Component;

class VerificationSection extends Component
{
    public $songs;

    public function mount(){
        $this->songs = Song::where('isverified',false)->get();
    }

    public function render()
    {
        return view('livewire.verification-section');
    }
}

livewire.verification-section.blade.PHP

<div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-4">
    @each('livewire.dashboard.song',$songs,'song','livewire.dashboard.song-empty')
</div>

livewire.dashboard.song.blade.PHP

<div class="w-full bg-white rounded-lg shadow-lg dark:bg-gray-800">
    <div class="px-4 py-2">
        <h1 class="text-3xl font-bold text-gray-800 uppercase dark:text-white">{{ $song->title }}</h1>
        <p class="mt-1 text-sm text-gray-600 dark:text-gray-400">{{ $song->created_at->diffForHumans() }}</p>
    </div>
    @if ($song->artist)
        <img class="object-cover w-full h-48 mt-2"
             src="{{ $song->artist->avatar() }}"
             alt="{{ $song->artist->name }}">
    @endif
    <div class="flex items-center justify-center px-4 py-2 bg-gray-900">
        <button
            class="px-2 py-1 text-xs font-semibold text-gray-900 uppercase transition-colors duration-200 transform bg-white rounded hover:bg-gray-200 focus:bg-gray-400 focus:outline-none">
            Zweryfikuj natychmiast
        </button>
    </div>
</div>

解决方法

好的，这很容易。标题长度不一样，高度不一样。