如何使用 livewire 更新表中的子组件？

Question

我在更改子组件时遇到嵌套组件问题 这是我的父组件，包括一个表格 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> 中的子组件只有一个带有livewire:model 的输入

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

我的孩子.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');
    }
}

我认为这会返回到孩子的mount() 方法。我可以每次更新数量吗？

Answer 1

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

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

This my question in GitHub

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

Answer 2

您没有正确使用数据绑定。你不需要添加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');
    }
}

现在在你的父母中，你可以简单地使用“魔法”事件$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

而不是调用onCartUpdate 方法。尝试在您的$listeners 中使用$refresh：

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