만든 계기

예전부터 라벨의 출력으로 뭔가를 하고 싶었지만 아무리 생각해도 소재가 떠오르지 않아 미뤄져 왔다.
어느 날, 흥미로운 경마 경기를 볼 때 경기의 조건(개최월, 거리, 경마장)은 항상 자신이 기억하는 것과 큰 변화가 있기 때문에 나는 자신의 뇌내 프로그램표(경마 개최 일정)를 갱신할 필요가 있다고 생각한다.
그래서 Laravel, 겸사겸사 Vue.나는 js로 수수께끼 놀이를 만들기로 결정했다.

대략적인 규격

경기는 GI, GII, GII처럼 등급을 정하기 때문에 각 등급에 따라 첫 페이지에서 도전하는 범주를 선택한다

문제는 모두 10개다.한 화면에서 개최월, 거리, 경마장을 선택해 해답을 준다

대답 단추를 눌러 답과 설명을 표시합니다

다음 질문을 클릭하면 다음과 같은 문제가 발생합니다.
10번이 끝나면 결과 화면이 표시됩니다

퀴즈~풀기 동작

이번에는 간단하게 문제만 냈기 때문에 표에는 문제표가 하나밖에 없다.
모처럼 화면 이동이 없는 SPA를 만들어 구성 요소로 첫 페이지, 출제 페이지, 결과 페이지의 3개의 Vue 파일을 만들고 싶다.
간단하게 처리 절차를 쓰면
1.fetch Item에서 테이블에서 무작위로 질문 하나를 가져옵니다. id와 경기 이름만 가져와 개발 도구에서 부정행위를 방지합니다.
2. fetchAnswer에서 id로 해당 질문을 검색하여 답변합니다.이때,processed_flg가 진짜입니다.
3. fetchNewItem에서 다음 질문을 받습니다.
ProblemCpntroller.php

    public function index($category)
    {
        DB::table('problems')->update(['processed_flg' => false]);
        $query = Problem::query();
        $query->where('category', '=', $category);
        $problem['count'] = $query->where('processed_flg', '=', false)->count();

        if($query->exists()){
            $query->select('id', 'title')->get();
            $problem = $query->inRandomOrder()->first();
            return $problem;
        }
    }
    public function fetchNewItem(Request $request)
    {
        $category = $request->input('category');
        $query = Problem::query();
        $query->where('category', '=', $category);
        $query->where('processed_flg', '=', false);

        if($query->exists()){
            $query->select('id', 'title')->get();
            $problem = $query->inRandomOrder()->first();
            return $problem;
        }
    }
    public function fetchAnswer(Request $request)
    {
        $id = $request->input('id');
        $problem = Problem::find($id);
        $problem->processed_flg = true;
        $problem->save();
        return $problem;
    }

Problem.vue

methods: {
        async fetchItem() {
            this.is_question = true
            const response = await window.axios.get(`/api/ploblems/category/${this.category}`)

            this.problem = response.data.title
            this.is_answer = false
            this.answer.id = response.data.id
        },
        async fetchNewItem() {
            if(this.counter === 9) {
                this.next_message = '結果発表'
            } else if(this.counter === 10) {
                this.$router.push({ name: 'result', params: { score: this.score } })
            }
            this.errors = {}
            this.answer = {}
            this.counter++
            this.is_question = true
            const response = await window.axios.get('/api/ploblems/category/', {params: {category: this.category}})

            this.problem = response.data.title
            this.is_answer = false
            this.answer.id = response.data.id

        },
        async fetchAnswer() {
            const answer = await window.axios.get('/api/ploblems/', {params: {id: this.answer.id}})
            this.get_answer = answer.data
            this.is_answer = true
            this.is_question = false
            if(this.answer.month !== this.get_answer.month) {
                this.errors.month = true
            }
            if(this.answer.distance !== this.get_answer.distance) {
                this.errors.distance = true
            }
            if(this.answer.place !== this.get_answer.place) {
                this.errors.place = true
            }

            if(!this.errors.month && !this.errors.month && !this.errors.place) {
                this.score++
            }
        }

실제 동작

해 본 소감.

시간 관계상 이동을 우선시했기 때문에 재구성의 여지가 생겼다.
대답할 때의 표시도 더 쉽게 이해하고 싶다.
그러나 이런 출력을 통해 자신이 이해하는 얕은 부분을 씻어낼 수 있다.앞으로도 하고 싶은 게 있으니까 Laravel과 Vue.js뿐만 아니라 다양한 것에 도전하고 싶어요!