Livewire组件中如何将Eloquent集合新增的自定义属性传递到Blade

你直接给Eloquent模型/集合动态赋值的自定义属性，默认不会被持久化：如果是Eloquent模型，未注册的临时属性不会被识别；如果是Livewire场景，公共属性序列化时会丢弃临时追加的属性，最终导致Blade读取时抛出属性不存在的错误。

方法1（最推荐，适配模型场景）：给对应Eloquent模型注册追加属性 #

如果auth()->user()->cart返回的是单个Cart模型实例，直接在Cart模型文件中添加访问器和追加属性即可全局生效：

// App/Models/Cart.php
class Cart extends Model
{
    // 声明要自动追加的自定义属性
    protected $appends = ['total_price'];

    // 编写属性的访问器，写你自己的计算逻辑即可
    public function getTotalPriceAttribute()
    {
        // 示例返回10，可替换为实际购物车总价计算逻辑
        return 10;
    }
}

修改后不需要在组件中手动赋值，Blade直接调用{{ $basket->total_price }}（或者驼峰totalPrice，Laravel会自动转换）即可。

方法2（适配集合场景）：单独声明总价为公共属性 #

如果auth()->user()->cart返回的是购物车商品的Eloquent集合，不要给集合本身追加自定义属性，单独把总价设为Livewire公共属性传递即可：

// Basket组件代码
class Basket extends Component
{
    use AuthorizesRequests;

    public $basket;
    // 单独声明总价公共属性
    public $totalPrice;

    public function mount()
    {
        if(Auth::user()){
            $this->basket = auth()->user()->cart;
            $this->totalPrice = 10;
        }
     }

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

Blade中直接读取单独的总价属性：

<span class="float-left" id="basketPrice">{{$totalPrice}}</span>

方法3（临时赋值场景）：使用setAttribute方法 #

如果是单个模型且仅需要本次请求临时赋值，替换原有直接赋值的写法为setAttribute：

// 原写法：$this->basket->totalPrice=10;
$this->basket->setAttribute('totalPrice', 10);

注意该方法仅单次请求生效，Livewire后续交互请求中临时属性会丢失，不推荐长期使用。

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