🎄teratailクリスマスプレゼントキャンペーン2024🎄』開催中!

\teratail特別グッズやAmazonギフトカード最大2,000円分が当たる!/

詳細はこちら
Vue.js

Vue.jsは、Webアプリケーションのインターフェースを構築するためのオープンソースJavaScriptフレームワークです。

Laravel

LaravelとはTaylor Otwellによって開発された、オープンソースなPHPフレームワークです。Laravelはシンプルで表現的なシンタックスを持ち合わせており、ウェブアプリケーション開発の手助けをしてくれます。

PHP

PHPは、Webサイト構築に特化して開発されたプログラミング言語です。大きな特徴のひとつは、HTMLに直接プログラムを埋め込むことができるという点です。PHPを用いることで、HTMLを動的コンテンツとして出力できます。HTMLがそのままブラウザに表示されるのに対し、PHPプログラムはサーバ側で実行された結果がブラウザに表示されるため、PHPスクリプトは「サーバサイドスクリプト」と呼ばれています。

Q&A

2回答

2922閲覧

Vue.jsでLaravelのController内にあるメソッドを使用したいのですが

yren

総合スコア5

Vue.js

Vue.jsは、Webアプリケーションのインターフェースを構築するためのオープンソースJavaScriptフレームワークです。

Laravel

LaravelとはTaylor Otwellによって開発された、オープンソースなPHPフレームワークです。Laravelはシンプルで表現的なシンタックスを持ち合わせており、ウェブアプリケーション開発の手助けをしてくれます。

PHP

PHPは、Webサイト構築に特化して開発されたプログラミング言語です。大きな特徴のひとつは、HTMLに直接プログラムを埋め込むことができるという点です。PHPを用いることで、HTMLを動的コンテンツとして出力できます。HTMLがそのままブラウザに表示されるのに対し、PHPプログラムはサーバ側で実行された結果がブラウザに表示されるため、PHPスクリプトは「サーバサイドスクリプト」と呼ばれています。

0グッド

0クリップ

投稿2021/03/10 07:59

編集2021/03/10 10:10

初めまして。
プログラミング初心者でよく分かっていない部分もありますがご了承ください。

現在、メルカリのようなECサイトをLaravelとVue.jsを使って作っています。

フロントをVue.js、バックをLaravelで作っているのですが、
思うようにいかないので、質問させていただきます。

発生している問題・エラーメッセージ

Laravelのコントロールで設定したメソッドを
Vue.jsのほうで使いたいのですが、
その方法がどのサイトにも載っていません。

他のサイトではLaravel内でのbladeファイルをフロントとして
使っているので、Vue.jsをフロントで使用するときの
コントローラーでのメソッドを取得する方法を教えて頂きたいです。

vueとlaravelは別々のブランチに指定しています。

該当のソースコード

<api.php> //新規登録 Route::post("/register", "App\Http\Controllers\UserController@register");
<UserController.php> public function register(Request $request){ $validator = Validator::make($request->all(), [ 'name' => 'required|string|max:100', 'email' => 'required|email|max:255|unique:users', 'password' => 'required|string|min:8|max:255|confirmed', 'password_confirmation' => 'required|string|min:8|max:255', ]); if($validator->fails()) { return response()->json([ 'status' => 'error', 'messages' => $validator->messages() ], 200); } $user = new User; $user->fill($request->all()); $user->password = bcrypt($request->password); $user->save(); return response()->json([ 'status' => 'success', 'data' => $user ], 200); }
<RegisterForm.vue> <template> <div class="container"> <form class="forms" action="route(register)" method="POST"> <div class="form-group"> <label>名前</label><br> <input type="text" name="name" class="form-content" id="name" value="{{ $inputs['name'] }}"> </div> <div class="form-group"> <label>メールアドレス</label><br> <input type="email" placeholder="info@example.com" name="email" class="form-content" id="email" v-model="email"> </div> <div class="form-group"> <label>パスワード</label><br> <input type="text" name="password" class="form-content" id="password" v-model="password"> </div> <div class="form-group"> <label>パスワード確認</label><br> <input type="text" name="password_confirmation" class="form-content" id="password_confirmation" v-model="password_confirmation"> </div> <button type="submit" class="btn btn-primary">送信</button> </form> </div> </template>

試したこと

https://www.hypertextcandy.com/vue-laravel-tutorial-authentication-part-3
このサイトを参考にして進めていますが、上手くいきません。

補足情報(FW/ツールのバージョンなど)

php 8.0.2
Laravel Framework 8.29.0
vue 3.0.6

気になる質問をクリップする

クリップした質問は、後からいつでもMYページで確認できます。

またクリップした質問に回答があった際、通知やメールを受け取ることができます。

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

guest

回答2

0

コントローラーから変数をView - blade経由でVue.jsに渡してるのは見たことありますが、Vueからメソッドを使えるようにするってのはあるんですかね? 参考サイトにもそんなことは書いてなさそうですし。

やるとすればblade内でメソッドを叩いて、その結果をVueに渡すくらいじゃないでしょうか?

参考
https://leben.mobi/blog/laravel_vue_blade/php/

上の人も書いてますが、この手法もややこしいですし、きっかり分離してVue側からはAPI経由でデータを受け取るようにするのがベストだと思いますよ

投稿2021/03/11 11:56

AbeTakashi

総合スコア4848

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

0

完全に分離してる場合、VueとLaravelはHTTPリクエストとレスポンスのやりとりしかできない。が基本。
apiにリクエストを送ったらjsonが返ってくる。それ以外のことはできない。
Vueから見たらLaravelのことはなにも分からない。Laravel特有の機能は一切使えない。

初心者が途中経過を全部すっ飛ばして難しいことやろうとしても無駄。
それを作れるようになるまでに必須な知識が大量にある。

投稿2021/03/10 11:44

退会済みユーザー

退会済みユーザー

総合スコア0

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

あなたの回答

tips

太字

斜体

打ち消し線

見出し

引用テキストの挿入

コードの挿入

リンクの挿入

リストの挿入

番号リストの挿入

表の挿入

水平線の挿入

プレビュー

まだベストアンサーが選ばれていません

会員登録して回答してみよう

アカウントをお持ちの方は

15分調べてもわからないことは
teratailで質問しよう!

ただいまの回答率
85.36%

質問をまとめることで
思考を整理して素早く解決

テンプレート機能で
簡単に質問をまとめる

質問する

関連した質問