如何使用 livewire 更新 table 中的 children 组件？

Question

我在更改 children parent 刷新时出现嵌套组件问题并且没问题，但是当我使用条形码在 CartItem 中添加相同的产品时，数量在 child 组件这是我的 parent 组件，包括 table parent.blade.php >>>

<table class="table mb-0">
    <thead>
        <tr>
            <th scope="col">product</th>
            <th>price</th>
            <th>quantity</th>
        </tr>
    </thead>
    <tbody>
        @foreach ($cartItems as $item)
            <tr>
                <td>{{$item['name']}}</td>
                <td>{{Cart::session(auth()->id())->get($item['id'])->getPriceSum()}}</td>
                <td>
                    <livewire:child :item="$item" wire:key="$item['id']"/>
                </td>
            </tr>
        @endforeach
    </tbody>
</table>

和这个 ID parent.php

class Parent extends Component
{
    public $service = null;
    public $cartItems = [];
    protected $listeners = ['cartUpdated' => 'onCartUpdate'];

    public function mount()
    {
        $this->cartItems = \Cart::session(auth()->id())->getContent()->toArray();
    }

    public function onCartUpdate()
    {
        $this->mount();
    }

    public function render()
    {
        $this->mount();
        return view('livewire.parent');
    }
}

<td> 中的 child 组件只有 livewire:model

的输入

<div>
    <input type="number" wire:model="quantity" wire:change="updateCart"><span class="col-9"></span>
</div>

我的Child.php

class Child extends Component
{
    public $item;
    public $quantity;

    public function mount($item)
    {
        $this->item = $item;
        $this->quantity = $item['quantity'];
    }

    public function updateCart()
    {
        \Cart::session(auth()->id())->update($this->item['id'], [
            'quantity' => array(
                'relative' => false,
                'value' => $this->quantity,
            ),
        ]);

        $this->emit('cartUpdated');
    }

    public function render()
    {
        return view('livewire.child');
    }
}

我觉得这个return到mount()的方法在child。我可以每次都更新数量吗？

Answer 1

而不是调用 onCartUpdate 方法。尝试在 $listeners:

中使用 $refresh

protected $listeners = ['cartUpdated' => '$refresh'];

Answer 2

您没有正确使用 data-bindings。您不需要添加 wire:change，因为您已经有了 wire:model——您可以简单地监听属性.

的变化

更好的是，只需使用一个属性 $item 并从中获取数量。

<div>
    <input type="number" wire:model="item.quantity" /> <span class="col-9"></span>
</div>

然后使用“魔法”方法updatedItemQuantity()监听$item属性.

上quantity属性的更新

class Child extends Component
{
    public $item;

    protected $rules = [
        'item.quantity' => 'required|numeric|min:0',
    ];

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

    public function updatedItemQuantity($quantity)
    {
        \Cart::session(auth()->id())->update($this->item['id'], [
            'quantity' => array(
                'relative' => false,
                'value' => $quantity,
            ),
        ]);

        $this->emit('cartUpdated');
    }

    public function render()
    {
        return view('livewire.child');
    }
}

现在在您的 parent 中，您可以简单地使用“魔法”事件 $refresh，

class Parent extends Component
{
    public $service = null;
    public $cartItems = [];

    protected $listeners = ['cartUpdated' => '$refresh'];

    public function mount()
    {
        $this->cartItems = \Cart::session(auth()->id())->getContent()->toArray();
    }

    public function render()
    {
        return view('livewire.parent');
    }
}

Answer 3

有一种方法可以使子组件具有反应性。只需使用now()或随机数作为key，如下：

<livewire:child :item="$item" key="{{now()}}"/>

This my question in GitHub

也很高兴看到这个tricky way对我有帮助。

如何使用 livewire 更新 table 中的 children 组件？

How can updating children components in table using livewire?

laravel

laravel-livewire