解決済み：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翻訳した内容を読んでみましょう。

要するに、『パブリックなプロパティ（今回は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ではなくprivateやprotectedを利用すれば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という選択肢もありかと思います(*´ω｀*)ﾉ

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

それではまた(*･ω･)ﾉ

シロウ

NFT・仮想通貨投資家 / エンジニア

TwitterInstagramYouTubeLINEContact

仮想通貨・NFTに400万以上投資しています。

本業エンジニア・副業ブロガー。

ブログ最高月80万円。累計200万以上。