PHP/Laravel

解決済み:Livewire component’s [my-articles-livewire] public property [articles] must be of type: [numeric, string, array, null, or boolean].のエラーを解消する方法

こんにちは、シロウです。

久しぶりにLaravelのLivewireを触っていると下記のようなエラーが発生しました。

Livewire component's [my-articles-livewire] public property [articles] must be of type: [numeric, string, array, null, or boolean]. 
Only protected or private properties can be set as other types because JavaScript doesn't need to access them.

[]の部分は人によって、文字列が違うと思いますが、大体のエラー内容は同じのはず。

Livewireは最近出てきた機能なので、まだまだ仕様がわからない部分があって困りますね、、、笑

今回は上記のエラーの解決方法を解説します。

Livewire component’s [] public property [] must be of type のエラーが出る原因

まずはGoogle翻訳した内容を読んでみましょう。

Livewireコンポーネントの[my-articles-livewire]パブリックプロパティ[articles]は、[数値、文字列、配列、null、またはブール値]のタイプである必要があります。
JavaScriptがアクセスする必要がないため、保護されたプロパティまたはプライベートプロパティのみを他のタイプとして設定できます。

要するに、『パブリックなプロパティ(今回はarticles)が[数値、文字列、配列、null、またはブール値]しか使えないよ!』って感じですかね。

今回エラーが発生したコード

一応今回エラーが出たコードを公開しておくと、下記の通りです。

<?php

//省略

use App\Models\Article;
use Livewire\WithPagination;

class PopularLivewire extends Component
{
    use WithPagination;

    public $articles;

    public function mount()
    {
        $this->articles = Article::paginate(10);
    }

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

 

かなり省略して、重要な部分だけ記述していますが、このページネーションを使っていることで、エラーが発生していました。

解決方法:publicではなくprivateやprotectedにする

解決方法としては、エラー文にも書いてあるようにpublicではなくprivateprotectedを利用すればOKです。

要するに、僕の場合は下記のようにすれば解決することができました。

<?php

//省略

use App\Models\Article;
use Livewire\WithPagination;

class PopularLivewire extends Component
{
    use WithPagination;

    protected $articles; //protectedに変更

    public function mount()
    {
        $this->articles = Article::paginate(10);
    }

    public function render()
    {
        return view('livewire.articles', [
            'articles'=>$this->articles, //ここで値を渡す
        ]);
    }

このようにpublicにしていた変数をprotectedにして、引数をview側に渡すときはviewメソッドの第二引数で指定します。

このようにすればエラーは出ないはずです。

Livewireを使うべきかviewやreactをつかべきか迷うところではありますが、僕のようにLaravel信者の人はLivewireという選択肢もありかと思います(*´ω`*)ノ

大変ですが頑張っていきましょう!

それではまた(*・ω・)ノ