Livewire表单提交后视图未自动刷新问题求助

我有一个Livewire组件，以下是它的视图部分代码：

<form class="flex gap-2" wire:submit="applyDiscountCode">
    <input required type="text" class="w-full" wire:model="discountCode" placeholder="Kupon kodu">
    <x-web.button type="submit">Uygula</x-web.button>
</form>

@php
$discounts = $this->getDiscounts();
@endphp

@if (!$discounts->isEmpty())
<ul wire:transition>
    @foreach ($discounts as $discount)
    <li wire:key="discount-{{ $discount->id }}" class="flex items-center justify-between">
        <span>{{ $discount->name }}</span>
        <span title="İndirimi kaldır"
              role="button"
              class="text-primary"
              wire:click="removeDiscount({{ $discount->id }})"
        >
            <x-fas-x class="!w-4 !h-4" />
        </span>
    </li>
    @endforeach
</ul>
@endif

当我提交表单时，会执行模型关联的插入操作（也就是往数据库表插入行），我确认数据已经成功插入了，但提交后视图没有自动刷新，必须再提交一次才能看到新增的行。有没有大佬知道原因呀？谢谢！

可能的原因和解决方案： #

1. 改用Livewire计算属性（最推荐）

你现在是通过@php调用getDiscounts()方法获取数据，但Livewire没法自动跟踪这个方法的依赖变化。把它改成计算属性，Livewire会自动监听依赖，数据变化时自动刷新视图：

在组件类里修改：

// 去掉原来的getDiscounts()方法，换成计算属性
public function getDiscountsProperty()
{
    // 这里写你原来getDiscounts()里的逻辑，比如：
    // return $this->order->discounts;
    return ...;
}

然后视图里删掉@php那段，直接用$discounts：

@if (!$discounts->isEmpty())
<!-- 后面的代码不变 -->
@endif

2. 手动刷新关联/数据

如果不想改计算属性，就在applyDiscountCode()方法执行完插入逻辑后，手动刷新依赖的数据：

比如如果getDiscounts()是基于某个模型的关联（比如$this->order->discounts），就刷新这个模型：

public function applyDiscountCode()
{
    // 你的优惠码插入逻辑...
    
    // 刷新关联模型，让Livewire感知到数据变化
    $this->order->refresh();
    
    // 或者如果是直接查询的，重新赋值给组件属性
    // $this->discounts = $this->getDiscounts();
}

3. 强制组件刷新

如果上面的方法都没效果，可以在applyDiscountCode()末尾手动触发组件刷新：

public function applyDiscountCode()
{
    // 插入逻辑...
    
    // 强制Livewire重新渲染组件
    $this->refresh();
}

额外检查：wire:key是正确的

看你的代码里wire:key="discount-{{ $discount->id }}"是没问题的，这个不会导致刷新问题，可以排除。

备注：内容来源于stack exchange，提问作者Masea