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の教科書・無料プレゼント】

Junko
Laravelの使い方を覚えたい!と思ったら、ぜひ、役立ててほしいです。
ひつじプログラマ
会員制サイトをいちから作っていくよ。ボタンをクリックして詳細を見てね。
Laravelの教科書の詳細を見る

【無料プレゼント】

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

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

詳細はこちらをクリック
【LaravelでWebアプリ開発します】

「会員制サイトを作ってほしい」「開発の時間がないから頼みたい!」

こんなご要望承り中。オンラインミーティングでも、ご相談承ります。

サンプルやお見積もり目安を見てみる

Twitter始めました。
40代からプログラミング!

コメント

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