如何用Livewire更新表格子组件？扫码加购同商品数量不更新

你的判断完全正确，问题核心就出在子组件的mount()方法上——这个方法只会在组件首次初始化时执行一次。当你扫码添加同款商品时，父组件的cartItems确实更新了，子组件的item属性也会同步拿到新值，但子组件并没有监听这个变化去更新quantity，所以输入框里的数值始终停留在初始化时的旧值。

下面是具体的修复方案：

1. 给子组件添加属性更新监听 #

修改Child.php，新增updatedItem()钩子方法，当item属性发生变化时自动同步最新的数量值：

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

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

    // 新增：监听item属性变化，同步最新quantity
    public function updatedItem($newItem) {
        $this->quantity = $newItem['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');
    }
}

2. 优化父组件代码（可选但推荐） #

你在父组件render()方法里调用mount()的做法不太规范，mount()是Livewire专门用于初始化的钩子，重复调用可能引发意外问题。建议把获取购物车数据的逻辑抽成独立方法：

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

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

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

    // 抽成独立方法，统一调用逻辑
    private function refreshCartItems() {
        $this->cartItems = \Cart::session(auth()->id())->getContent()->toArray();
    }

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

原理说明 #

• Livewire子组件的props（比如这里的item）更新时，会自动触发对应的updated{PropName}钩子方法，我们利用这个钩子同步最新的数量值。
• 这样不管是通过子组件手动修改数量，还是扫码添加同款商品，只要父组件的cartItems更新，子组件就能自动获取到最新的quantity并更新输入框内容。

内容的提问来源于stack exchange，提问作者Amir.msj1374