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

Question

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

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

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

<?php
use Illuminate\Database\Seeder;
class QuizTableSeeder extends Seeder
{
    /**
–	Run the database seeds.
     *
     *  @return  void
     */
    public function run()
    {
        DB::table('quizzes')->truncate();
        DB::table('quizzes')->insert(
            [
              [
                'title' => '',
                'answers_id' => 1,
                'created_at' => now(),
                'updated_at' => now(),
                'image_src' => NULL,
              ],
              [
                'title' => '',
                'answers_id' => 2,
                'created_at' => now(),
                'updated_at' => now(),
                'image_src' => NULL,
              ],
              [
                'title' => '',
                'answers_id' => 3,
                'created_at' => '2017-10-04 21:00:00',
                'updated_at' => now(),
                'image_src' => NULL,
              ],
              [
                'title' => '',
                'answers_id' => 4,
                'created_at' => now(),
                'updated_at' => now(),
                'image_src' => NULL,
              ],
            ]
          );
    }
}

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

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

Quiz.php

<?php

namespace App;


use App\Answer;
use Illuminate\Database\Eloquent\Model;


class Quiz extends Model
{
    protected $table = 'quizzes';

  public function answer()
  {
    return $this->hasOne('App\Answer', 'id', 'answers_id');
  }

}

QuizController.php

<?php

namespace App\Http\Controllers\Api;

use App\Http\Controllers\Controller;
use Illuminate\Http\Request;

use App\Quiz;

class QuizController extends Controller
{
    public function show(Request $request)
    {
        $quiz = Quiz::all()
      ->take(1);

    return $quiz;
    }
}

Home.vue

<template>
<h2 class="title is-4">今日のクイズ</h2>
      <div>
      <button @click.stop.prevent="goQuiz()" class="button is-info is-centered">
　　　クイズへ
　　　</button>
    </div>

</template>


<script>
export default {
  components: {
  },
  data() {
    return {
      information :[]
    };
  },

},

  methods: {
    goQuiz() {
      this.$router.push("/quiz");
    }
  }
};
</script>

Quiz.vue

<template>
  <h2 cclass="title is-4">
    問題
  </h2>
  <p>{{ title }}</p>
<ul>
  <li v-for="(answer, index) in answers" :key="index">
    <a>
    <button
     @click="goAnswer(index + 1)"
     :disabled="isAlreadyAnswered"
     class="button is-light is-fullwidth"
    >{{ index + 1 }}</button>
   </a>
  {{ answer }}
 </li>
</ul>

<p>
  <button
   class="quiz-correct-answer button is-light is-fullwidth"
   v-show="isAlreadyAnswered"
   disabled
  >{{ correctAnswerNo }}</button>
</p>

</template>

<script>
export default {
  
  mounted() {
    this.getQuiz()

   },
  data() {
    return {
      quizData: [],

      title: "",
      imageSrc: "",
      answers: [],
      commentary: "",
      correctAnswerNo: 0,
      isCorrect: false, //正解かどうか
      isMistake: false, //間違いかどうか
      isAlreadyAnswered: false,
      isQuizFinish: false, 
      score: 0,
      quizNumber: 1,
    };
  },
   methods: {
     getQuiz() {
      this.$http.get('/api/quiz')
      .then(res => {
        this.quizData = res.data
      })
     },

     goAnswer(selectAnswerNum) 
     {
       if (selectAnswerNum === 0) {
        this.isCorrect = false;
        this.isMistake = false;
      } else if (selectAnswerNum === Number(this.correctAnswerNo)) {
        // 正解を押した場合 alert-infoを表示し、alert-dangerを非表示にする そしてスコアを加算する
        this.isCorrect = true;
        this.isMistake = false;
        this.score += 1;
      } else {
        // 不正解の場合 alert-infoを非表示し、alert-dangerを表示にする
        this.isMistake = true;
        this.isCorrect = false;
      }

      this.isAlreadyAnswered = true;

     },
     
   },

};
</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

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

class CreateAnswersTable extends Migration
{
    /**
     * Run the migrations.
     *
     * @return void
     */
    public function up()
    {
        Schema::create('answers', function (Blueprint $table) {
            $table->bigIncrements('id');
            $table->string('answer_1');
            $table->string('answer_2');
            $table->string('answer_3');
            $table->string('answer_4');
            $table->integer('correct_answer_no');
            $table->text('commentary');
            $table->timestamps();
        });
    }

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

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"
  }
]

Comments

[Lulucom]

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

[Tikka123456]

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

[Lulucom]

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

[Tikka123456]

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

Answer 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
      })

Comments

[Tikka123456]

回答ありがとうございます。クイズを表示することができました。ありとうございます