MENU
CLOSE
APPSTUDYSYSTEMWEBSITE Edit : 2019.03.20 Update : 2023.02.01

Vue.jsからLaravelに非同期(axios)でデータを送り、返り値をVue.js側で表示する

わかりやすいようなめちゃくちゃわかりづらいようなタイトル(笑)

やりたいこと

①アプリ側(Vue.js)からユーザ情報を外部サーバ(Laravel)になげる
②Laravel側で、受け取った情報に紐づく追加情報をデータベース(mysql)から抽出し、Jsonデータとしてアプリ側(Vue.js)に投げ返す
③返ってきた追加情報をアプリ側(Vue.js)で表示させる

想定としては、“ログイン情報からユーザ情報を取得し、プロフィール画面に表示する”みたいなことをしようとしてます。

1.Vue.js側でのPOST処理

▼ profile.vue

とりあえず、固定のuserid「bonchan」を投げたら、ニックネームとか出身地とかひっぱってくる感じにします。通信にはaxiosを使いました。この設定などは別記事で載せます><

2.Laravel側での受け取りとデータ返却

▼routes/web.php

まず、http://●●/profileにpostリクエストされたらProfileController.phpのget_profile関数を参照させます。

▼Http/Controllers/ProfileController.php

DBからデータを抽出し、最後Json形式にしてデータを投げ返します!Json形式について、こちらの記事がめちゃくちゃわかりやすいです。CORS処理記載もありますが、、これも別記事にまとめます><

3.Vue.js側での返り値の操作

▼ profile.vueのJS

「1.Vue.js側でのPOST処理」で全部書いてありますが、、「res.data.キー名」で返ってきた値を、ひとつづつ代入してます。もっといいやり方はありそう..。
またthis.name = res.data.name;で代入しようとしたところ、thisが本来のデータを参照してくれずうまく値を入れられなかったので、selfにいったん退避させるという方法をとりました。参考はこちら

▼ profile.vueのHTML

一部抜粋です。返ってきたデータは{{ profile }}のように二重かぎかっこで表示させることができました。inputのvalueに入れたいときは、v-model=”name”と記述することで、value値に表示させることができました。

ひとまずこれで表示することができました。vue.js、Laravel初心者のため手探りすぎるので、、もっと良いやり方あったら教えていただきたいです!
 

Web Trends Lab.編集部

KOHIMOTO Inc.所属。トレンドやノウハウ中心にWebサイトを作るための知見を現場から発信していきます👀また、制作したWebサイトでの活用法や、最前線での施策を伺う企業へのインタビューも実施予定。