Livewire 公共属性类型限制及分页数据处理方案

在 Livewire 组件开发中，开发者可能会遇到 Livewire\Exceptions\PublicPropertyTypeNotAllowedException 异常，提示公共属性必须是 numeric、string、array、null 或 boolean 类型。这是因为 Livewire 框架为了保证数据在前端的正确传递和使用，对公共属性的类型进行了限制。当使用 paginate() 方法获取分页数据时，由于 paginate() 返回的是 Illuminate\Pagination\LengthAwarePaginator 实例，而非允许的类型，因此会触发该异常。

解决此问题的一种有效方法是避免直接在 Livewire 组件的公共属性中存储分页对象，而是通过其他方式将数据传递到视图。以下是一个具体的示例：

示例代码：

假设我们有一个 SampleData Livewire 组件，需要显示 Sample 模型的分页数据。

1. 移除 mount 方法中的分页逻辑：

   不再在 mount 方法中将 LengthAwarePaginator 实例赋值给公共属性 $samples。

   // 移除以下代码
   // public function mount($lab = null)
   // {
   //     $this->sample = new Sample;
   //
   //     if ($lab) {
   //         $this->lab = Lab::find($lab);
   //         $this->samples = Sample::whereLabId($this->lab->id)->paginate(5);
   //
   //     }
   // }

2. 在 render 方法中获取分页数据并传递到视图：

   在 render 方法中，使用 paginate() 方法获取分页数据，并通过 compact 函数将其传递到视图。

   

   PictoGraphic

   AI驱动的矢量插图库和插图生成平台

   下载

   use App\Models\Sample;
   use Livewire\Component;
   use Livewire\WithPagination;
   
   class SampleData extends Component
   {
       use WithPagination; // 引入 WithPagination trait
   
       public $lab;
   
       public function mount($lab = null)
       {
            if ($lab) {
                $this->lab = Lab::find($lab);
            }
       }
   
       public function render()
       {
           if($this->lab){
               $samples = Sample::whereLabId($this->lab->id)->paginate(5);
           } else {
               $samples = Sample::paginate(5);
           }
   
           return view('livewire.sample-data', compact('samples'));
       }
   }

   注意: 需要引入 Livewire\WithPagination trait，并且在视图中使用 $samples->links() 来显示分页链接。

3. 视图文件 (resources/views/livewire/sample-data.blade.php)：

   在视图文件中，可以直接访问 $samples 变量，并使用 foreach 循环遍历数据。

   
       
               @foreach($samples as $sample)
                   
               @endforeach
           
   
           
   
               
   
                   
   ID
                   
   Name
                   
           
           
   
                       
   {{ $sample->id }}
                       
   {{ $sample->name }}
                   
       
   
       {{ $samples->links() }}
   

注意事项：

• 确保你的 Livewire 组件已经引入了 Livewire\WithPagination trait，以便正确处理分页链接。
• 在视图中使用 $samples->links() 方法生成分页链接。
• 如果需要在 Livewire 组件中进行分页相关的操作（例如，跳转到指定页面），可以通过 Livewire 的事件机制来实现。

总结：

通过避免在 Livewire 组件的公共属性中直接存储 LengthAwarePaginator 实例，并改用在 render 方法中获取数据并通过 compact 传递的方式，可以有效地解决公共属性类型限制的问题，并顺利实现 Livewire 组件中的分页功能。这种方法不仅避免了类型错误，也使得代码更加清晰和易于维护。