概要

〜ある日の午後の出来事〜

web.php

Route::get('hoge/{id}', 'HogeController@index')->name('hoge');

Route::get('fuga/{id}', 'FugaController@index')->name('fuga');

Laravel × Vue.jsでの開発中、このようなルートを設定して

<div id="app">
    <hogehuga
        :routes='@json([
            "hoge" => route("hoge", 1), 
            "fuga" => route("fuga" ,1), 
        ])'
    >
    </hogefuga>
</div>

BladeテンプレートからVue.jsにルートを渡してみたところ

構文エラー
え？？？と思い、実際のコードを見てみると・・・

なぜか、fugaの方のルートがパラメータ渡せていない & 配列やjson_encodeの閉じかっこが無い。。。

解決策

色々試してみても全く解決しそうになく、類似の事象もみつからない。このまま迷宮入りかと思いきや、ReadDoubleにこんな記述がありました。

Note: @jsonディレクティブは既存の変数をJSONとしてレンダするためだけに使用してください。Bladeテンプレートは正規表現ベースのため、複雑な式をディレクティブに渡すと予期しない不良動作の原因になります。

なるほどー。
今回のように@jsonディレクティブにroute関数などを使った複雑な式を直接入れると思わぬバグをうむ可能性があるみたい。

ということで、以下のようにして解決。

@php
    $routes = [
        "hoge" => route("hoge", 1), 
        "fuga" => route("fuga" ,1), 
    ];    
@endphp
<div id="app">
    <hogehuga
        :routes='@json($routes)'
    >
    </hogefuga>
</div>

@jsonディレクティブには変数以外を入れないように気をつけましょう。