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

LaravelとVue連携
スポンサーリンク

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

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

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

スポンサーリンク

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

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

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

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

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

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

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

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

resourcesフォルダ直下にtestblade.phpファイルを表示させるようにします。
$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ファイルをblade.phpファイルに埋め込めるようになりました。

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

resources内にtest.blade.phpファイルを作ります。
ファイルの中に下記のようにいれます。

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

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

⑥Vueファイルを編集する

resources/components のTestComponent.vueを開きます。
次のように入力します。

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

<script></script>が、vueのプログラミングを記述する箇所です。

script内の propsに、コントローラー→test.blade.phpから渡された変数 $testを入れておきます。
これで、$testが使えるようになりました。
template内に v-for="test in tests" という部分がありますが、これはまさに、foreachと同じ働きをします。
{{test.title}}とした部分には、testsテーブルのtitleが挿入されていきます。

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

実際に表示してみた例が、上記のとおり。
tests->title の値がリスト表示されています。
ここまでで、連携についての解説は終わります。
このあとVue上で色々と処理をしていきたいところ。
また別の記事で紹介していきますね。
LaravelとVue連携

【無料プレゼント】

「LaravelでWebアプリをいちから作れるようになりたい!」

そんなLaravel初心者のあなたへ【Laravelの教科書】基礎編プレゼント中!
会員制フォーラムサイトを学習しながら作れます。

詳細はこちらをクリック

【個別サポート実施中】

「本ブログに記載の方法を試してみたけれど、うまくいかない」「コードを見てほしい」という方のために、有償でメールサポートいたします。以下のボタンをクリックして相談フォームにアクセスして下さい。

詳しく見る

Twitter始めました。
スポンサーリンク
40代からプログラミング!

コメント

タイトルとURLをコピーしました