LaravelのSeederでVueに値を渡したい

LaravelのSeederを使ってVueに値を渡す処理をしたいです。
Seederに登録されているJSONをAPI連携でVueに値を渡します。
現在の状態は特にエラーもなくJSONが空の状態
どうかよろしくお願いします。

やりたいこと
Home.vueからクイズ画面に遷移して、Quiz.vueでAPI連携でSeederの値を渡して表示する。

いままでのソースコード
Seeder関連
QuizTableSeeder.php

php
1<?php
2use Illuminate\Database\Seeder;
3class QuizTableSeeder extends Seeder
4{
5    /**
6–	Run the database seeds.
7     *
8     *  @return  void
9     */
10    public function run()
11    {
12        DB::table('quizzes')->truncate();
13        DB::table('quizzes')->insert(
14            [
15              [
16                'title' => '',
17                'answers_id' => 1,
18                'created_at' => now(),
19                'updated_at' => now(),
20                'image_src' => NULL,
21              ],
22              [
23                'title' => '',
24                'answers_id' => 2,
25                'created_at' => now(),
26                'updated_at' => now(),
27                'image_src' => NULL,
28              ],
29              [
30                'title' => '',
31                'answers_id' => 3,
32                'created_at' => '2017-10-04 21:00:00',
33                'updated_at' => now(),
34                'image_src' => NULL,
35              ],
36              [
37                'title' => '',
38                'answers_id' => 4,
39                'created_at' => now(),
40                'updated_at' => now(),
41                'image_src' => NULL,
42              ],
43            ]
44          );
45    }
46}

api.php
http://localhost:8000/api/quiz/〜というエンドポイントを用意しています

php
1Route::group(['middleware' => ['api']], function () {
2    Route::get('information', 'Api\InformationController@index');
3    Route::get('quiz', 'Api\QuizController@show'); // ルーティング
4    
5  });

Quiz.php

php
1<?php
2
3namespace App;
4
5
6use App\Answer;
7use Illuminate\Database\Eloquent\Model;
8
9
10class Quiz extends Model
11{
12    protected $table = 'quizzes';
13
14  public function answer()
15  {
16    return $this->hasOne('App\Answer', 'id', 'answers_id');
17  }
18
19}

QuizController.php

php
1<?php
2
3namespace App\Http\Controllers\Api;
4
5use App\Http\Controllers\Controller;
6use Illuminate\Http\Request;
7
8use App\Quiz;
9
10class QuizController extends Controller
11{
12    public function show(Request $request)
13    {
14        $quiz = Quiz::all()
15      ->take(1);
16
17    return $quiz;
18    }
19}

Home.vue

javascript
1<template>
2<h2 class="title is-4">今日のクイズ</h2>
3      <div>
4      <button @click.stop.prevent="goQuiz()" class="button is-info is-centered">
5　　　クイズへ
6　　　</button>
7    </div>
8
9</template>
10
11
12<script>
13export default {
14  components: {
15  },
16  data() {
17    return {
18      information :[]
19    };
20  },
21
22},
23
24  methods: {
25    goQuiz() {
26      this.$router.push("/quiz");
27    }
28  }
29};
30</script>

Quiz.vue

javascript
1<template>
2  <h2 cclass="title is-4">
3    問題
4  </h2>
5  <p>{{ title }}</p>
6<ul>
7  <li v-for="(answer, index) in answers" :key="index">
8    <a>
9    <button
10     @click="goAnswer(index + 1)"
11     :disabled="isAlreadyAnswered"
12     class="button is-light is-fullwidth"
13    >{{ index + 1 }}</button>
14   </a>
15  {{ answer }}
16 </li>
17</ul>
18
19<p>
20  <button
21   class="quiz-correct-answer button is-light is-fullwidth"
22   v-show="isAlreadyAnswered"
23   disabled
24  >{{ correctAnswerNo }}</button>
25</p>
26
27</template>
28
29<script>
30export default {
31  
32  mounted() {
33    this.getQuiz()
34
35   },
36  data() {
37    return {
38      quizData: [],
39
40      title: "",
41      imageSrc: "",
42      answers: [],
43      commentary: "",
44      correctAnswerNo: 0,
45      isCorrect: false, //正解かどうか
46      isMistake: false, //間違いかどうか
47      isAlreadyAnswered: false,
48      isQuizFinish: false, 
49      score: 0,
50      quizNumber: 1,
51    };
52  },
53   methods: {
54     getQuiz() {
55      this.$http.get('/api/quiz')
56      .then(res => {
57        this.quizData = res.data
58      })
59     },
60
61     goAnswer(selectAnswerNum) 
62     {
63       if (selectAnswerNum === 0) {
64        this.isCorrect = false;
65        this.isMistake = false;
66      } else if (selectAnswerNum === Number(this.correctAnswerNo)) {
67        // 正解を押した場合 alert-infoを表示し、alert-dangerを非表示にする そしてスコアを加算する
68        this.isCorrect = true;
69        this.isMistake = false;
70        this.score += 1;
71      } else {
72        // 不正解の場合 alert-infoを非表示し、alert-dangerを表示にする
73        this.isMistake = true;
74        this.isCorrect = false;
75      }
76
77      this.isAlreadyAnswered = true;
78
79     },
80     
81   },
82
83};
84</script>

追記
create_quizs_table

<?php

use Illuminate\Database\Migrations\Migration;
use Illuminate\Database\Schema\Blueprint;
use Illuminate\Support\Facades\Schema;

class CreateQuizzesTable extends Migration
{
    /**
     * Run the migrations.
     *
     * @return void
     */
    public function up()
    {
        Schema::create('quizzes', function (Blueprint $table) {
            $table->bigIncrements('id');
            $table->text('title');
            $table->string('image_src')->nullable();
            $table->integer('answers_id');
            $table->timestamps();
        });
    }

    /**
     * Reverse the migrations.
     *
     * @return void
     */
    public function down()
    {
        Schema::dropIfExists('quizzes');
    }
}

create_answer_table

php
1<?php
2
3use Illuminate\Database\Migrations\Migration;
4use Illuminate\Database\Schema\Blueprint;
5use Illuminate\Support\Facades\Schema;
6
7class CreateAnswersTable extends Migration
8{
9    /**
10     * Run the migrations.
11     *
12     * @return void
13     */
14    public function up()
15    {
16        Schema::create('answers', function (Blueprint $table) {
17            $table->bigIncrements('id');
18            $table->string('answer_1');
19            $table->string('answer_2');
20            $table->string('answer_3');
21            $table->string('answer_4');
22            $table->integer('correct_answer_no');
23            $table->text('commentary');
24            $table->timestamps();
25        });
26    }
27
28    /**
29     * Reverse the migrations.
30     *
31     * @return void
32     */
33    public function down()
34    {
35        Schema::dropIfExists('answers');
36    }
37}

Tinker実行結果

>>> App\Quiz::all();
=> Illuminate\Database\Eloquent\Collection {#3268
     all: [
       App\Quiz {#3269
         id: "1",
         title: "パソコン(PC)は何の略か。",
         image_src: null,
         answers_id: "1",
         created_at: "2021-02-05 20:12:53",
         updated_at: "2021-02-05 20:12:53",
       },
       App\Quiz {#3270
         id: "2",
         title: "アプリケーションをコンピュータで使用可能にするための作業のことを何と言うか。",
         image_src: null,
         answers_id: "2",
         created_at: "2021-02-05 20:12:53",
         updated_at: "2021-02-05 20:12:53",
       },
       App\Quiz {#3271
         id: "3",
         title: "中央処理装置とも訳されるコンピュータの情報処理の性能に影響する部分の略称は。Intel社製が多い。",
         image_src: null,
         answers_id: "3",
         created_at: "2017-10-04 21:00:00",
         updated_at: "2021-02-05 20:12:53",
       },
       App\Quiz {#3272
         id: "4",
         title: "情報を記録し読み出す代表的な記憶装置の一つ。PCに内蔵されている円盤状の磁気ディスク。",
         image_src: null,
         answers_id: "4",
         created_at: "2021-02-05 20:12:53",
         updated_at: "2021-02-05 20:12:53",
       },
     ],
   }

localhost:8000/api/quizにアクセスした結果

// 20210207084833
// http://localhost:8000/api/quiz

[
  {
    "id": 1,
    "title": "パソコン(PC)は何の略か。",
    "image_src": null,
    "answers_id": "1",
    "created_at": "2021-02-05 20:12:53",
    "updated_at": "2021-02-05 20:12:53"
  }
]

Lulucom

2021/02/04 16:05

データベースのquizzesテーブルにはレコードが入っていることは確認済みでしょうか？ Seederを実行してレコードを入れたつもりでも何らかの理由で実際にはテーブルは空のままだったということはないでしょうか。

Tikka123456

2021/02/06 03:21

回答ありがとうございます。 quizzesテーブルにレコードが入っているかどうかの確認ってどのようにすればいいでしょうか？ Seederを実行した際Database seeding completed successfully.と出ているので成功していると思います。

Lulucom

2021/02/06 03:28 編集

データベースのテーブルのデータを見れる何らかのツールを使うと良いでしょう。または、Laravelに付いているTinkerというツールを使って確認できます。 php artisan tinker で起動したTinkerの中で App\Quiz::all() などを実行すると良いでしょう。（exit と打てばTinkerは終了できます）

Tikka123456

2021/02/07 00:03

返信ありがとうございます。 Tiknerを実行した結果データは入っておりました。（結果を追記しました）また、localhost:8000/api/quizに接続した際Seederのデータが表示されているのに肝心のWebのほうでは表示されないです。API関連の処理の書き方が間違っているのでしょうか？

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

回答1件

ベストアンサー

Quiz.vueでquizDataに入った値が使われていないように思います。
例えば、titleやimageSrcに入れてあげる必要があるのではないでしょうか。

     getQuiz() {
      this.$http.get('/api/quiz')
      .then(res => {
        this.quizData = res.data
        const quiz = this.quizData[0] // 表示したい問題
        this.title = quiz.title
        this.imageSrc = quiz.image_src
      })

投稿2021/02/07 00:33

編集2021/02/07 01:26

Lulucom

総合スコア1899