LiveWire新闻分类筛选功能失效问题求助

问题现象 #

• 切换下拉选择框的分类选项时无任何反应
• 点击分页按钮后，分类参数显示在URL中，但没有对应新闻内容展示

问题根源与修复步骤 #

1. 查询条件逻辑错误
   原代码错误地通过新闻自身的id字段筛选，实际应该根据新闻表的category_id匹配选中的分类ID；同时冗余的categories->pluck('id', 'name')->get(...)逻辑完全没必要，直接使用选中的分类ID即可。

2. 分页链接处理错误
   LiveWire分页组件会自动维护查询字符串参数，无需手动调用appends(request()->query())，直接用{{ $news->links() }}就能保证分页时分类参数正确传递。

3. 错误提示变量不匹配
   Blade模板中错误提示绑定的categoryId与组件内的selectedCategory变量名不一致，需要统一变量名。

4. 初始化逻辑优化
   直接从查询字符串初始化selectedCategory，同时设置except规则避免默认值出现在URL中，保证参数类型统一。

修正后的代码 #

NewsIndex.php

<?php

namespace App\Livewire;

use App\Models\News;
use App\Models\NewsCategory;
use Livewire\Component;
use Livewire\WithPagination;

class NewsIndex extends Component
{
    use WithPagination;

    public int $selectedCategory = 0;

    protected $queryString = [
        'selectedCategory' => ['except' => 0],
    ];

    public function updatingSelectedCategory()
    {
        $this->resetPage();
    }

    public function render()
    {
        $categories = NewsCategory::all();
        
        $newsQuery = News::with('category')
            ->orderBy('id', 'desc');

        if ($this->selectedCategory !== 0) {
            $newsQuery->where('category_id', $this->selectedCategory);
        }

        return view('livewire.news-index', [
            'news' => $newsQuery->paginate(),
            'categories' => $categories,
        ]);
    }
}

news-index.blade.php

<div>
    <div class="max-w-2xl md:mx-auto md:text-center xl:max-w-none">
        <p class="text-sm font-semibold leading-7 text-third-500  tracking-wider uppercase">Novice</p>
        <h2 class="font-display text-center mb-10 lg:mb-20 text-4xl tracking-tight md:text-5xl">
            Arhiv novic
        </h2>
    </div>
    <div class="mx-auto bg-third-100 bg-opacity-5 rounded-xl pt-10 px-10 md:px-0">
        <div class="mb-10">
            <div class="flex mx-auto justify-center gap-4">
                <div>
                    <select wire:model="selectedCategory" id="category"
                            class="mt-2 block w-full rounded-md border-0 py-1.5 pl-3 pr-10 text-gray-900 ring-1 ring-inset ring-gray-300 focus:ring-2 focus:ring-indigo-600 sm:text-sm sm:leading-6">
                        <option value="0">Vse kategorije</option>
                        @foreach($categories as $category)
                            <option value="{{ $category->id }}">{{ $category->name }}</option>
                        @endforeach
                    </select>
                    <div class="h1 text-red-900"> @error('selectedCategory'){{ $message }}@enderror </div>
                </div>
            </div>
        </div>

        <div class="mx-auto flex justify-center">
            <div class="space-y-20 mt-5">
                @foreach($news as $item)
                    <article
                        wire:key="{{ $item->id }}"
                        tabindex="1"
                        class="relative isolate flex flex-col gap-8 lg:flex-row hover:bg-slate-200 rounded-xl">
                        <div
                            class="relative aspect-[16/9] sm:aspect-[2/1] lg:aspect-square lg:w-56 lg:shrink-0">
                            <img
                                src="https://images.unsplash.com/photo-1496128858413-b36217c2ce36?ixlib=rb-4.0.3&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=3603&q=80"
                                alt=""
                                class="absolute inset-0 h-full w-full rounded-2xl bg-gray-50 object-cover">
                            <div class="absolute inset-0 rounded-2xl ring-1 ring-inset ring-gray-900/10"></div>
                        </div>
                        <div class="p-2">
                            <div class="flex items-center gap-x-4 text-xs">
                                <time datetime="2020-03-16" class="text-gray-500">
                                    {{ $item->created_at->diffForHumans() }}
                                </time>
                                <span
                                    class="relative z-10 rounded-full px-3 py-1.5 font-medium text-gray-100 hover:bg-gray-100"
                                    style="background-color: {{ $item->category->color }};">
                                        {{ $item->category->name }}
                                    </span>
                            </div>
                            <div class="group relative max-w-xl">
                                <h3 class="mt-3 text-lg font-semibold leading-6 text-gray-900 group-hover:text-gray-600">
                                    <a href="{{ route('news.show', $item ) }}">
                                        <span class="absolute inset-0"></span>
                                        {{ $item->title }}
                                    </a>
                                </h3>
                                <p class="mt-5 text-sm leading-6 text-gray-600">
                                    {{ $item->description }}
                                </p>
                            </div>
                        </div>
                    </article>
                @endforeach
            </div>
        </div>
        <div class="mx-auto max-w-2xl lg:max-w-4xl mt-20 pb-10">
            {{ $news->links() }}
        </div>
    </div>
</div>

内容的提问来源于stack exchange，提问作者fx3z