laravelとvue.jsでaxiosを使用しデータを取得したい

現在、laravel8とvue.jsのaxiosを使い非同期処理でローカルDBのデータを取得するというのを実装しています。
コントローラーに届いているのはログで確認済みです。
一旦テストでvueのコンソールログにコントローラーで取得してきたDBの値(json形式)を出力したいのですが、コンソールではundifinedになってしまいます。
どこが間違っているのでしょうか？

web.php

php
1Route::get('/','App\Http\Controllers\VendorController@getuser');

Welcome.blade.php

php
1    <body>
2        <div id="app">
3            <v-main>
4                <example-component></example-component>
5            </v-main>
6        </div>
7        <script src="{{ mix('js/app.js') }}"></script>
8    </body>

VendorController.php

php
1class VendorController extends Controller
2{
3    public function getuser(Request $request)
4    {
5        $hoge= DB::table('m_vender')
6        ->orderBy('vender_cd')
7        ->select('vender_post_cd')
8        ->get()->toJson();
9        return view('welcome', compact('hoge'));
10    }
11}

ExampleComponent.vue

vue
1<template>
2    <div class="container">
3        <div class="row justify-content-center">
4            <div class="card">
5                <div class="card-header">Example Component</div>
6            </div>
7        </div>
8    </div>
9</template>
10
11<script>
12    export default {
13        mounted() {
14            this.$axios.get('/')
15                .then((res) => {
16                    console.log(res.data.hoge);
17            })
18        }
19    }
20</script>

行動規範の内容に同意します

回答1件

ベストアンサー

Json返すならコントローラーはこうじゃないでしょうか。

php
1$hoge= DB::table('m_vender')
2        ->orderBy('vender_cd')
3        ->select('vender_post_cd')
4        ->get()
5return response()->json($hoge); <-- コレ

(質問より追記)

「responseに入れる」という言葉の意味が何を指しているのかによるので、質問に合う説明になってるかわからないですが、まず

php
1view('welcome', compact('hoge'));」

これはwelcome.blade.phpというphpのテンプレートファイルに $hoge 変数を渡して、htmlを生成する処理です。これを returnすると、vue側(クライアント側)にはHTMLが返ってきます。

次に、

php
1response()->json($hoge)

この「response()」は、ResponseFactoryという「レスポンスを作るための便利クラスを返す、larabelのヘルパー関数」です。レスポンスそのものではなく、あくまで作るためのヘルパーであり、レスポンスを作るという事は「ここに何かを入れる」という事とは別の話です。レスポンスはreturnしたものがレスポンスになります。

ResponseFactoryのjsonという関数を呼ぶと、json文字列が生成されれます。これをreturnすると、vue側(クライアント側)にはJsonが返ってきます。

投稿2021/12/20 13:24

編集2021/12/21 03:55

umau

総合スコア805

leysxxk

2021/12/21 01:21

umau様ご回答誠にありがとうございます。 json形式に無事変換出来ました一つ追記でご質問なのですが、下記の記述方法だとvue側のコンソールでresponseのdataの中身が"welcom.blade.php"のHTMLデータが返ってきてしまいます。。上記のjsonをresponseに入れるにはどのようにすればいいでしょうか？ $hoge = DB::table('m_vender') ->orderBy('vender_cd') ->select('vender_post_cd') ->get(); response()->json($hoge); return view('welcome', compact('hoge'));