【Laravel】BladeファイルからVue3コンポーネントに配列を渡す方法-備忘録(解説なし)

散々迷った

3ファイル間の設定でBladeからVueコンポーネントに配列渡せます。

test.blade.php

//Contorollerから渡しても良い
//ここではBladeファイル内で配列作成
@php
        $photes_data = array(
            array(
                'img_no'=> '0',
                'path' => 'laundry.jpg',
                'alt' => 'サーフボード'
            ),
            array(
                'img_no'=> '1',
                'path' => 'harusa.jpg',
                'alt' => '農業'
            ),
            array(
                'img_no'=> '2',
                'path' => 'ht-beach.jpeg',
                'alt' => 'ht_1'
            )
        );
@endphp

//コンポーネント作成
<div id="phote_gallery">
　　　　//配列をJSONに変換
    <template-photegallery v-bind:photes_data="'{{ json_encode($photes_data) }}'"></template-photegallery>
</div>

 

resources/js/app.js

import {createApp} from 'vue';
import Test from './components/Test.vue';
if(document.getElementById('phote_gallery')){
    console.log("test.blade.php")
    createApp({})
        .component("template-photegallery", Test)
        .mount('#phote_gallery');
}

Laravelにおいてresources/js/app.jsがVue.jsのエントリーポイントになるので、当ファイルにてVue.jsのコンポーネントをインスタンス化しています。

ただしこのファイルは全てのBladeファイルで読み込んでいるので、このコンポーネントを使わないファイルでもインスタンス化してしまいます。

それを防ぐためにid="phote_gallery"があるときだけインスタンス化したいいと考えて、js構文でhmtl内のID属性取得。

 

Vue3からVueアプリを作成する場合はcreateApp({})関数を使う様になったので、仕様通りに作成。
※Vue2の書き方では動作しませんでした。

 

Test.vue

<script setup>
import { defineProps } from "vue";
const props = defineProps({
    photes_data: {
        type: String,
        required: true,
    },
});
console.log(props.photes_data);
</script>

Propsを定義し、test.blade.phpで作成した<template-photegallery></template-photegallery>の「template-photegallery」を呼び出すことでBladeからVue3へのデータ連携が完了です。