Laravelコントローラーからvue.jsへ変数を受け渡しつつ連携する方法

LaravelとVue連携

2024.06.23 2020.10.18

LaravelとVue.jsを連携させる方法を解説します。

このときLaravelのコントローラーから変数を受け渡し、これをVueファイル内で使えるようにします。

まず最初にLaravelにVueをインストールする必要がありますが、こちらは下記の記事をご覧ください。

Laravel8でVueを使う: インストール・ComponentとViewの連携

Laravel8にVueをインストールして使ってみました。 Bootstrapと共に併用しています。インストールの方法、Viewファイルとの連携方法を紹介していきます。 Laravel8でVueを使う: インストールComp...

【追加】

Laravel11とVue3連携はこちらご覧ください。

Laravel11とVue3の連携方法：カウンタを作ってみる

Laravel11とVue3の連携方法を解説します。 LaravelとVueを連携させたいときに、参考にしてください♪ Laravel11とVue3の連携方法：カウンタを作ってみるまずは、Laravelのプロジェクトを作成します...

LaravelとVueの連携方法を初心者向けに分かりやすく解説

LaravelとVueの連携方法を初心者向けに分かりやすく解説

今回は次の流れで連携をさせます。

Laravelのコントローラーから、ビューファイルを表示する設定をする
ビューファイルにvue.jsを埋め込んで、vue.jsを表示する

Laravel8を使った動作を解説します。

それでは、各ステップを説明していきます。

① ルート設定を準備しておく

今回は次のようにしました。

Route::get('/test', [App\Http\Controllers\TestController::class, 'create'])->name('test.create');

1	Route::get('/test', [App\Http\Controllers\TestController::class, 'create'])->name('test.create');

TestControllerのcreateに処理を書いていきます。

②モデルとマイグレーションファイルを準備する

モデルとマイグレーションファイルを作っておきます。

php artisan make:model Test -m

1	php artisan make:model Test -m

作成後、database/migrationsから作成したマイグレーションファイルを開きます。

下記のように編集して保存した後、 php artisan migrate を実行します。

    public function up()
    {
        Schema::create('tests', function (Blueprint $table) {
            $table->id();
            $table->string('title');
            $table->timestamps();
        });
    }

public function up()

{

Schema::create('tests', function (Blueprint $table) {

$table->id();

$table->string('title');

$table->timestamps();

});

}

さらに、データベースにログインします。作成した testsテーブルを確認します。

titleカラムを編集し、何か文字列をいれておいてください。

Junko

とりあえず今はテストなので、手動で編集します。

③コントローラーを準備しておく

下記コマンドを実行して、TestControllerを作ります。

php artisan make:controller TestController

1	php artisan make:controller TestController

作成したTestController.phpを開きます。

一番上にTestモデルを使うためのuse宣言をいれます。

use App\Models\Test;

1	use App\Models\Test;

さらに次のようにcreateメソッドを入れておきます。

tests をビューファイルに受け渡すようにします。

    public function create(){
        $tests=Test::all();
        return view('test', compact('tests'));
    }

public function create(){

$tests=Test::all();

return view('test', compact('tests'));

}

④componentsにvueファイルを作る

いよいよvue.jsファイルを作っていきます。

resources/js/componentsの中に、今回用のvueファイルを作ります。

デフォルトでは、ExampleComponent.vueが入っています。

同じ場所に、TestComponents.vueを作ってください。

中身はまだ空っぽでOKです。

⑤app.jsを設定する

作成したvue.jsファイルについて、app.jsに記述しておきます。

resources/js 内のapp.jsファイルを開き、20行目あたりに、下記を追加します。

Vue.component('test-component', require('./components/TestComponent.vue').default);

1	Vue.component('test-component', require('./components/TestComponent.vue').default);

これでVueファイルをblade.phpファイルに埋め込めるようになりました。

⑥ビューファイルを編集する

resources内にtest.blade.phpファイルを作ります。

ファイルの中に下記のようにいれます。

@extends('layouts.app')
@section('content')
<test-component
 :tests="{{$tests}}"
></test-component>
@endsection

@extends('layouts.app')

@section('content')

<test-component

:tests="{{$tests}}"

></test-component>

@endsection

<test-component></test-component>内にTestComponent.vue ファイルの内容が挿入されます。

<test-component>タグ内を上記のように設定することで、コントローラーから受け取った$testを、TestComponent.vueに引き渡せます。

⑦Vueファイルを編集する

resources/components のTestComponent.vueを開きます。

次のように入力します。

<template>
        <div class="row justify-content-center">
            <ul>
            <li v-for="test in tests" :key="test.id">{{test.title}}</li>
            </ul>
        </div>
</template>

<script>
    export default {
        props:["tests"]
    }
</script>

<ul>

<li v-for="test in tests" :key="test.id">{{test.title}}</li>

</ul>

</div>

</template>

export default {

props:["tests"]

}

</script>

<template></template>が表示部分になります。

script内の propsに、コントローラー→test.blade.phpから渡された変数 $testを入れておきます。

これで、$testが使えるようになりました。

template内に v-for="test in tests" という部分がありますが、これはまさに、foreachと同じ働きをします。

{{test.title}}とした部分には、testsテーブルのtitleが挿入されていきます。

⑧ファイルを表示してみる

npm run dev を実行した後、ブラウザで表示を確認してみましょう。

実際に表示してみた例が、上記のとおり。

データベースのtitleカラムにいれた内容が表示されます。

★追加

2021/11/19：

モデルとマイグレーションの処理について入っていなかったので、追加しました。