如何将 Livewire 组件内的方法中的 Json 数据显示到视图中？

Question

我有一个 livewire 组件方法，每次用户选择一个选择选项时都会更新一个值。

public function updatedWil()
    {
        $this->fees = DB::table('delivery_fees')
            ->select('stopdesk', 'domicile')
            ->where('destination', $this->wil)
            ->get()->toJson();
            //dd($this->fees);
        $result = response()->json($this->fees);
        return view('livewire.form-elements',compact('result'));
    }

上面的方法根据用户选择的目的地返回两个值“domicile”和“stopdesk”。

"[
 {"stopdesk":615,
  "domicile":1040
 }
]
"

**我在这里尝试做的是将这些值发送到我的视图：

'livewire.form-elements'

并将其显示在

foreach.

上并将其显示在单选类型输入上。 **

<div class="flex items-center mb-4">
 <input checked id="default-radio-1" type="radio" wire:model="deliveryFees" value="415" 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: 415DA</label>
        </div>
        <div class="flex items-center mb-4">
            <input id="default-radio-2" type="radio" wire:model="deliveryFees" value="315" 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:  315 DA</label>
        </div>

我尝试用这样的

compact

方法返回它：

 $result = response()->json($this->fees);
 return view('livewire.form-elements',compact('result'));

并使用

foreach

循环和

json_decode

并将其显示在我的视图中，如下所示：

        @foreach (json_decode($result,true) as $items)
        <div class="flex items-center mb-4">
            <input checked id="default-radio-1" type="radio" wire:model="deliveryFees" value="415" 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: {{ $items->domicile }} DA</label>
        </div>
        <div class="flex items-center mb-4">
            <input id="default-radio-2" type="radio" wire:model="deliveryFees" value="315" 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: {{ $items->domicile }} DA</label>
        </div>
        @endforeach

不幸的是，它返回了

Undefined variable $result on view

的错误。

Answer 1

出现以下错误：

"must be of type: [numeric, string, array, null, or boolean]"

每当您尝试将无法识别的对象转换为 livewire 中的公共变量时就会发生。有两种方法可以解决这个问题：

使用模型而不是数据库助手

所以你可以这样写你的查询：

$this->yourPublicVariable = DeliveryFees::select('stopdesk', 'domicile')
        ->where('destination', $this->wil)
        ->get()

通过使用模型，Livewire 确实知道您正在传递一个集合，这将防止类型错误。

沿着视图传递变量

        $json = DB::table('delivery_fees')
        ->select('stopdesk', 'domicile')
        ->where('destination', $this->wil)
        ->get()->toJson();

    return view('livewire.form-elements',['json' => $json]);

通过这种方式，变量会被传递一次，而不是被附加到组件，这样做的缺点是，在下次更新时，传递的变量将不再可用。