如何在Laravel Livewire中从数据库向输入框显示多产品数量值？

我是Laravel Livewire新手，需要把数据库中以数组形式返回的多个产品数量值显示到输入框里，但尝试后输入框没显示任何值，请求帮助。

我已尝试的操作：

Livewire组件代码片段 #

public $items;
public function render()
    {
        if (Auth::check()) {
            $this->items = Cart::where('user_id', Auth::user()->id)->get();
            return view('livewire.cart-page', ['cart_items' => $this->items]);
        } else {
            return view('livewire.cart-page');
        }
    }

Blade视图代码片段 #

@foreach($cart_items as $cart_item)
    <input class="qty-input" wire:model="product_quantity" style="border: 1px solid #d3d3d3;height: 40px;" type="number" value="{{ $cart_item->product_quantity }}" /> 
@endforeach

完整组件类代码 #

<?php

namespace App\Http\Livewire;

use Livewire\Component;
use App\Models\Cart;
use Illuminate\Support\Facades\Auth;

class CartPage extends Component
{
    public $items;
    public $product_quantity;
    protected $listeners = ['cart_items' => 'get_cart_items'];
    protected $rules = [
        'items.*.product_quantity' => 'required',
        // 'items.*.content' => 'required',
    ];
    public function render()
    {
        // $cart_items = Cart::where('user_id', auth()->user()->id)->get();
        // dd(Auth::id());
        if (Auth::check()) {
            $this->items = Cart::where('user_id', Auth::user()->id)->get();
            return view('livewire.cart-page', ['cart_items' => $this->items]);
        } else {
            return view('livewire.cart-page');
        }
        // return view('livewire.cart-page', ['cart_items' => $cart_items]);
        // }
    }

    function mount()
    {
        if (Auth::check()) {
            $this->items = Cart::where('user_id', Auth::user()->id)->get();
        }
    }

    public function checkout($sub_total, $cart_items)
    {
        // dd($sub_total);
        return view('checkout', compact('sub_total', 'cart_items'));
    }

    public function changePrice()
    {
        dd("hello");
    }

    public function get_cart_items()
    {
        if (auth()->check()) {
            $items = Cart::where('user_id', Auth::user()->id)->get();
            return view('livewire.cart-page', ['cart_items' => $items]);
        } else {
            return view('livewire.cart-page');
        }
    }

    public function delete_cart_item($id)
    {
        $cart = cart::find($id);
        $cart->delete();
        // $this->emit('cart_items');
        $this->emit('count');
    }
}

items数组结构说明 #

返回的是多个Cart模型实例组成的集合，每个实例包含product_quantity字段（即产品数量），还有其他关联字段。

核心问题是视图中的wire:model绑定错误，你当前绑定的是单个变量product_quantity，但需要绑定集合中每个item的product_quantity属性，同时要满足Livewire对循环元素的追踪要求。

步骤1：修正视图绑定与循环逻辑 #

把视图里的循环改成绑定到items集合对应元素的属性，同时添加wire:key确保Livewire能识别每个唯一元素：

@foreach($items as $index => $cart_item)
    <input 
        class="qty-input" 
        wire:model="items.{{ $index }}.product_quantity" 
        style="border: 1px solid #d3d3d3;height: 40px;" 
        type="number" 
        min="1"
        wire:key="cart-item-{{ $cart_item->id }}"
    /> 
@endforeach

步骤2：优化组件数据加载逻辑 #

你已经在mount方法中加载了items，render方法无需重复查询数据库，直接返回视图即可（公共属性$items可被视图直接访问）：

public function render()
{
    return view('livewire.cart-page');
}

步骤3：修复get_cart_items方法 #

Livewire组件更新数据后会自动重渲染，无需返回视图，只需更新$items属性：

public function get_cart_items()
{
    if (auth()->check()) {
        $this->items = Cart::where('user_id', Auth::user()->id)->get();
    }
}

步骤4：清理无用变量 #

组件中public $product_quantity;已无作用，直接删除即可。

最终效果 #

修改完成后，每个输入框会正确显示对应产品的数量，且修改输入值时，$items集合中的对应属性会实时同步，完全符合Livewire双向绑定的特性。

内容的提问来源于stack exchange，提问作者pioneer321