变量没有改变（Laravel 10）

Question

我有一个视图，其中有一个侧边栏，我可以在其中选择不同的选项并动态更改组件

我的问题是，当我第一次单击其中一个选项时，它会更改变量的值，并且组件会更改信息，但当我第二次单击时，它不起作用。

这是我的刀片文件：

<div>
    <div class="flex">
        <div x-show="open" class="w-full text-white py-2">
            <!-- Dropdown items -->
            @foreach ($studyCircles as $studyCircle)
                <button wire:click.prevent="selectStudyCircle({{ $studyCircle->study_circle_id }})"
                        class="block px-2 py-2 hover:text-gray-300">{{ $studyCircle->study_circle_name }}</button>
            @endforeach
        </div>
    </div>

    @if ($studyCircleId)
        <div class="w-full h-full ms-4">
            <div class="mr-5 mt-5 rounded-xl shadow-xl bg-white">
                @livewire('admin.StudyCircles.Tools.Tools', ['studyCircleId' => $studyCircleId])
            </div>
            <div class="mr-5 my-5 pb-12 rounded-xl shadow-xl bg-white">
                @livewire('admin.StudyCircles.StudyCircleInformation', ['studyCircleId' => $studyCircleId])
            </div>
            <div class="mr-5 my-5 pb-12 rounded-xl shadow-xl bg-gray-100">
                @livewire('admin.StudyCircles.AssistanceTableModule', ['studyCircleId' => $studyCircleId])
            </div>
        </div>
    @else
        <div class="w-full h-full ms-4 p-5">
            <div class="flex justify-center items-center rounded-xl shadow-xl bg-white h-screen">
                <p class="text-lg font-bold ">No hay ningún círculo de estudio seleccionado.</p>
            </div>
        </div>
    @endif
</div>

这是控制器

<?php

namespace App\Livewire\Admin\StudyCircles;

use Livewire\Component;
use App\Models\StudyCircle;
use App\Models\Advisor;

class MainContent extends Component
{
    public $studyCircleId, $advisorId, $studyCircles;

    public function mount()
    {
        $this->advisorId = Advisor::where('user_id', auth()->user()->id)->value('advisor_id');
        $this->studyCircles = StudyCircle::where('advisor_id', $this->advisorId)->get();
    }

    public function render()
    {
        return view('livewire.admin.study-circles.main-content');
    }

    public function selectStudyCircle($id)
    {
        $this->studyCircleId = $id;
    }
}

你能帮我吗？

Answer 1

问题并不完全清楚：哪个变量不会改变？组件应该更改哪些信息？

如果您的意思是

@if ($studyCircleId)

内部的组件应该动态继承$studyCircleId的值，那么您需要将该变量的#[Reactive]属性添加到这些组件中，例如对于Tools组件：

.....

use Livewire\Attributes\Reactive; // <~~~ add this
use Livewire\Component;

class Tools extends Component
{
    #[Reactive]                     // <~~~ add this
    public $studyCircleId;
    .....

我还建议您在 foreach 循环中添加一个 wire:key 以避免任何刷新问题：

@foreach ($studyCircles as $studyCircle)

    <button wire:click.prevent="selectStudyCircle({{ $studyCircle->study_circle_id }})" 
            wire:key="study_circle_{{ $studyCircle->study_circle_id }}"
            class="block px-2 py-2 hover:text-gray-300"
    >
        {{ $studyCircle->study_circle_name }}

    </button>

@endforeach