当值从 0 变为 1 或 1 变为 0 时，Livewire 显示问题

Question

我在更新数量时遇到显示更新问题。我在 table 中的数字旁边有 left/right 箭头，以允许用户更改数字的值，如下所示：

当用户单击左键时，会触发 Livewire 操作，从 belongs-to-many 关系中删除关联。当用户单击右键时，将触发一个 Livewire 操作，将关联添加到 belongs-to-many 关系。

Livewire 操作随后刷新模型，以便为 Livewire 组件更新计算关联记录数的动态模型属性。

当数字达到0时，向左的箭头消失。当数量达到可用总量时，右箭头消失。

关于此组件的一切都很好，除了每当值从 0 变为 1 或 从 1 变为 0 时，数字从显示中消失：

切换到 0

切换到 1

我的组件中的其他一切都完美无缺，包括依赖于消失的值的其他功能。与我的组件中的任何其他操作交互会导致数字神奇地重新出现。

如果我将 <?php dump($widget->my_associated) ?> 添加到我的 blade，每次都会转储正确的值。请参阅切换到 1 或 4 的示例：

这是我的组件的代码：

shop-widgets.blade.php

<td align="center">
        <span style="white-space:nowrap;">
        @if ($widget->my_associated)
            <a href="#" wire:click="release(false)"><i class="fas fa-fw fa-caret-left"></i></a>
        @else
            <i class="fas fa-fw"></i>
        @endif
        {{ $widget->my_associated }}<?php dump($widget->my_associated) ?>
        @if ($widget->remaining)
            <a href="#" wire:click="reserve(false)"><i class="fas fa-fw fa-caret-right"></i></a>
        @else
            <i class="fas fa-fw"></i>
        @endif
        </span>
    </td>

ShopWidgets.php

<?php

namespace App\Http\Livewire;

use Livewire\Component;
use App\Widget;

class ShopWidgets extends Component
{
    public $widget;

    public function mount(Widget $widget)
    {
        $this->widget = $widget;
    }

    public function render()
    {
        return view('livewire.shop-widgets', [
            'widget' => $this->widget,
        ]);
    }

    public function reserve($bought) {
        $this->widget->reserve($bought);
        $this->widget->refresh();
    }

    public function release($bought) {
        $this->widget->release($bought);
        $this->widget->refresh();
    }
}

Widget.php

    public function reserve($bought)
    {
        Gate::authorize('reserve', $this);
        if ($this->remaining > 0) {
            $this->buyers()->attach(Auth::user()->id, ['bought' => $bought]);
        }
    }

    public function release($bought)
    {
        Gate::authorize('release', $this);
        $pivot = $this->buyers()->newPivotStatementForId(Auth::user()->id)->where('bought', $bought);
        if ($pivot->count() > 0)
        {
            $pivot->limit(1)->delete();
        }
    }

知道在这种非常特殊的情况下可能导致显示问题的原因是什么吗？

Answer 1

因此，在进一步研究之后，我意识到转储可能正确显示，因为它位于 <div> 中。所以，我将数字显示放在 <span> 中，它似乎解决了我的问题... <span>{{ $widget->my_associated }}</span>

如果有人知道为什么会发生这种情况，我很想知道以解决未来的问题...

当值从 0 变为 1 或 1 变为 0 时，Livewire 显示问题

Livewire display issue when value changes from 0 to 1 or 1 to 0

laravel

laravel-livewire

laravel-7