Livewire任务列表组件刷新异常：触发后跳转至tasks组件

我使用Livewire开发了一款待办事项应用，其中index组件负责展示任务列表，并引入了用于创建任务的create组件。创建任务时，我会dispatch一个stored事件以刷新index视图，但Livewire执行刷新操作时却跳转到了项目中的tasks组件。

我验证后确认问题出在刷新逻辑上——我在index视图中添加了一个刷新按钮：

<button wire:click="$refresh">Click</button>

点击该按钮后结果一致：Livewire调用tasks组件，并未刷新index组件。

相关代码 #

index组件视图（引入create组件） #

<div class="m-2">
        <livewire:tasks.create @stored="$refresh"/>

        <div class="flex gap-2 mt-2">
            <div class="w-full">
                @forelse($tasks['realizadas'] as $task)
                    <div wire:key="{{ $task->id }}" class="border-2 border-gray-200 rounded-md mb-2">
                        <div class="bg-green-300 rounded-t-md p-2">
                            <p>{{ $task->date->translatedFormat('g:i A j \d\e F \d\e\l Y') }}
                                <b>({{ $task->date->diffForHumans() }})</b></p>
                        </div>

                        <div class="p-2">
                            <p class="font-medium">{{ $task->name }}</p>

                            <div class="flex justify-end gap-2">
                                <button type="button" wire:click="indexComments({{ $task->id }})"
                                        class="bg-blue-600 text-white rounded-md py-2 px-3">
                                    <i class="fa-solid fa-comment"></i>
                                </button>

                                <button type="button" wire:click="edit({{ $task->id }})"
                                        class="bg-yellow-300 rounded-md py-2 px-3" title="Editar">
                                    <i class="fa-solid fa-pen"></i>
                                </button>

                                <button type="button" wire:click="delete({{ $task->id }})"
                                        class="bg-red-600 text-white rounded-md py-2 px-3" title="Eliminar">
                                    <i class="fa-solid fa-trash"></i>
                                </button>
                            </div>
                        </div>
                    </div>
                @empty
                    <div
                        class="bg-green-300 border border-green-500 text-green-800 font-medium rounded-md p-4 text-center">
                        No tiene tareas realizadas
                    </div>
                @endforelse
            </div>
        </div>
    </div>

index组件代码 #

class Index extends Component
{
    public array $tasks = [];

    public function render()
    {
        $tasks = auth()->user()->tasks()->get();

        $this->tasks['realizadas'] = $tasks->where('status', 'Realizada');
        $this->tasks['pendientes'] = $tasks->where('status', 'Pendiente');
        $this->tasks['imprevistas'] = $tasks->where('status', 'Imprevisto');

        return view('livewire.tasks.index');
    }
}

create组件代码 #

class Create extends Component
{
use LivewireAlert;

#[Validate(['required', 'string', 'max:255'])]
public string $name = '';

#[Validate(['required', 'date'])]
public string $date = '';

#[Validate(['required', 'string', 'max:255'])]
public string $status = '';

public function store(): void
{
    $this->validate();

    $task = auth()->user()->tasks()->create($this->pull());
    $this->dispatch('stored');

    $this->alert('success', "Tarea $task->name añadida");
}
}

create组件视图 #

<div>
    <form wire:submit="store" class="border border-gray-300 rounded-md p-2">
        <h3 class="text-xl text-center">Crear Tarea</h3>

        <div class="flex gap-3">
            <div class="flex-1">
                <label for="name">Nombre</label>
                <input type="text" wire:model="name" id="name"
                       class="w-full border-gray-300 rounded-md" autocomplete="on" required autofocus>
                @error('name') <span class="text-red-500 font-medium">{{ $message }}</span> @enderror
            </div>

            <div class="flex-1">
                <label for="date">Fecha</label>
                <input type="datetime-local" wire:model="date" id="date"
                       class="w-full border-gray-300 rounded-md" required>
                @error('date') <span class="text-red-500 font-medium">{{ $message }}</span> @enderror
            </div>

            <div class="flex-1">
                <label for="status">Estado</label>
                <select wire:model="status" id="status"
                        class="w-full border-gray-300 rounded-md" required>
                    <option value="">Seleccionar...</option>
                    <option value="Realizada" class="bg-green-500">Realizada</option>
                    <option value="Pendiente" class="bg-red-500">Pendiente</option>
                    <option value="Imprevisto" class="bg-yellow-500">Imprevisto</option>
                </select>
                @error('status') <span class="text-red-500 font-medium">{{ $message }}</span> @enderror
            </div>

            <div class="flex-none">
                <button type="submit" class="bg-black text-white rounded-md mt-6 p-2">Añadir</button>
            </div>
        </div>
    </form>
</div>

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