[Laravel / vue] bladeファイルからvueファイルに値を渡す際に「v-binbに式がありません」と警告が出る

Question

初学者で、独学で進めているため、初歩的な質問申し訳ございません。

前提・実現したいこと

controllerから2つの配列を取得して、bladeファイル→vueコンポーネントに値を渡したい。

発生している問題・エラーメッセージ

Template compilation error: v-bind is missing expression.

該当のソースコード

// controllerファイル
/**
 * レッスン一覧
 *
 * @param Request $request
 * @return Factory|View
 */
public function index(Request $request)
{
    $params     = $request->all();
    $lessons    = $this->lesson->search($params);
    $categories = $this->category->getAll(true);
    return view('lessons.index', compact('lessons', 'categories'));
}

// bladeファイル
<lesson-index-component
    :lessons="{{ $lessons }}"
    :categories="{{ $categories }}"
>

試したこと

ddで、$lessons及び$categoriesの中身を表示してみました。

// $lessons
Illuminate\Pagination\LengthAwarePaginator {#1381 ▼
  #total: 5
  #lastPage: 1
  #items: Illuminate\Database\Eloquent\Collection {#1388 ▶}
  #perPage: 20
  #currentPage: 1
  #path: "http://127.0.0.1:8000/lessons"
  #query: []
  #fragment: null
  #pageName: "page"
  +onEachSide: 3
  #options: array:2 [▶]
}

// $categories
Illuminate\Database\Eloquent\Collection {#1402 ▼
  #items: array:19 [▶]
}

$lessonsが配列ではない？と感じたので、配列のみ取得しました。

/**
 * レッスン一覧
 *
 * @param Request $request
 * @return Factory|View
 */
public function index(Request $request)
{
    $params     = $request->all();
    $lessons    = $this->lesson->search($params);
    $lessons    = $lessons->items();
    $categories = $this->category->getAll(true);
    return view('lessons.index', compact('lessons', 'categories'));
}

しかし、以下のエラーになりました。

htmlspecialchars() expects parameter 1 to be string, array given (View: /Applications/MAMP/htdocs/app/resources/views/lessons/index.blade.php)

補足情報（FW/ツールのバージョンなど）

Laravel Framework 8.14.0
vue@3.0.2

Answer 1

参考）
https://qiita.com/kuhblume/items/37aa2981de6d36d4d3d7

オブジェクトのインスタンスをbladeに渡してそれを{{ }}で展開する場合は__toStringメソッドがないとエラーとなります。

配列を直接{{ }}で展開するとエラーになるので、PHP側であらかじめ配列をJson文字列に変換してからBlede経由でVueに渡すなどするといいと思います。

Comments

[nanami0221]

ご連絡、有難うございます！

オブジェクトのインスタンスを渡す場合、__toStringが必要なのですね、、、
とても参考になりました！
有難うございます。