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>