Livewire 如何更新组件并重新渲染视图中的内容的说明

问题描述 投票:0回答:1

我有一个 Livewire 组件,它加载基于

$step
变量的动态组件。这个想法是根据变量的值加载三个组件之一。当用户单击按钮时,变量会更新。

<div class="flex-1 flex flex-col">
    <livewire:reservation.progress />

    <livewire:dynamic-component :component="'reservation.step' . $step" />

    <div class="block text-right">
        <x-button wire:click="nextStep" type="button" title="{{ __( 'Next' ) }}" class="bg-lime-400 rounded px-6 py-2.5 text-center text-nowrap text-slate-900 border border-slate-900 hover:text-white hover:bg-slate-900 transition-colors duration-300">
            <i class="fa-solid fa-right-long"></i>
        </x-button>
    </div>
</div>

nextStep函数的实现是这样的:

public function nextStep(): void
{
    $this->step += 1;
    if ( $this->step > 3 ) {
        $this->step = 1;
    }
}

我的问题是......为什么当用户单击按钮时动态组件没有更新。组件改变时不应该刷新吗?

laravel components laravel-livewire
1个回答
0
投票

Livewire 3 的语法是:

<livewire:dynamic-component :is="$componentName" :key="$uniqueKey" />

或者,另一种选择:

<livewire:is :component="$componentName" :key="$uniqueKey" />

:键是强制性的

© www.soinside.com 2019 - 2024. All rights reserved.