如何将Livewire组件方法中的JSON数据展示到视图？

错误原因 #

1. Livewire的updated钩子函数不能通过return view()传递变量，组件与视图的数据交互依赖公共属性同步，这种返回视图的方式不符合Livewire的工作机制，导致视图无法获取$result。
2. response()->json($this->fees)返回的是JsonResponse对象，不是可直接解析的JSON字符串，就算传递到视图也无法正常解析。

修正方案 #

步骤1：修改组件的updatedWil方法 #

先在组件类中声明公共属性存储运费数据，直接查询获取原生对象/集合，无需转JSON：

// 组件类中添加公共属性
public $feesData = null;

public function updatedWil()
{
    // 根据你的JSON数据，查询结果仅一条，用first()获取更合适
    $this->feesData = DB::table('delivery_fees')
        ->select('stopdesk', 'domicile')
        ->where('destination', $this->wil)
        ->first();
}

步骤2：修正视图渲染逻辑 #

直接使用组件的$feesData属性，无需json_decode，同时修正你之前把stopdesk误写为domicile的错误：

{{-- 先判断数据是否存在，避免空值报错 --}}
@if($feesData)
    <div class="flex items-center mb-4">
        <input checked id="default-radio-1" type="radio" wire:model="deliveryFees" value="{{ $feesData->domicile }}" class="w-4 h-4 mr-2 text-purple-400 bg-gray-100 border-gray-300 focus:ring-purple-500 dark:focus:ring-purple-500-600 dark:ring-offset-gray-800 focus:ring-2 dark:bg-gray-700 dark:border-gray-600">
        <label for="default-radio-1" class="ms-2 text-sm font-medium text-gray-900 dark:text-gray-300">Livraison à domicile: {{ $feesData->domicile }} DA</label>
    </div>
    <div class="flex items-center mb-4">
        <input id="default-radio-2" type="radio" wire:model="deliveryFees" value="{{ $feesData->stopdesk }}" class="w-4 h-4 mr-2 text-purple-400 bg-gray-100 border-gray-300 focus:ring-purple-500 dark:focus:ring-purple-500-600 dark:ring-offset-gray-800 focus:ring-2 dark:bg-gray-700 dark:border-gray-600">
        <label for="default-radio-2" class="ms-2 text-sm font-medium text-gray-900 dark:text-gray-300">Livraison StopDesk: {{ $feesData->stopdesk }} DA</label>
    </div>
@endif

额外说明 #

• Livewire组件的视图是初始化时绑定的，所有动态数据都要通过组件的公共属性传递，钩子函数只负责更新属性值，Livewire会自动同步到视图。
• 如果查询结果可能有多条，把first()改成get()，然后用@foreach($feesData as $item)遍历即可。

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