Laravel Vue.js チュートリアルクイズアプリ作成 LaravelからVue.jsにデータを渡す

今回は前回の続きでVuetifyでデータベースから取得した値を表示してみるよ

はい、先生！お願いします！！

この記事を書いた人

プロコアラ＠エンジニアブロガー
10年間エンジニアをしており、副業でWebサイトやWebサービスを作っています。
一時期資格取得にハマりTOEIC860点オーバー、応用情報処理は取得。休日はラズパイをいじるコアラ好きです。
Follow @top_pro_koala

今回のチュートリアル概要

今回は、Viewが中心のお話です。

データベースから取得したデータをControllerからModel経由で読みだしてViewに表示させます。

Vuetifyのデータテーブルを使用して、ソートができるようにします。

変数の渡し方概要

Controllerからはcompactを使用します。

bladeからVue.jsへはpropsとv-bindを利用してデータを渡します。

今回の目標

以前のチュートリアルでデータベースに以下のようなテストデータを設定しました。

これを少し加工してViewに渡します。

MariaDB [homestead]> select * from tests;
+----+------------+------------+----------------------------+------------+-----------+----------+--------+
| id | created_at | updated_at | test_name                  | test_day   | applicant | examinee | passed |
+----+------------+------------+----------------------------+------------+-----------+----------+--------+
|  1 | NULL       | NULL       | 平成22年度春期試験         | 2010-04-18 |     92108 |    65407 |  14489 |
|  2 | NULL       | NULL       | 平成22年度秋期試験         | 2010-10-17 |    100113 |    73242 |  17129 |
+----+------------+------------+----------------------------+------------+-----------+----------+--------+
2 rows in set (0.000 sec)

合格率と受験率を計算してからViewにデータを渡してVuetifyで試験データを表示します。

v-data-tableを使用することで、ソートなどが簡単にできます。

ControllerからViewに変数を渡す

TestController.phpのindex関数を修正します。

    public function index()
    {
        $tests = Test::all();
        foreach ($tests as $test) {
            $passed_rate = round($test['passed'] / $test['examinee'] * 100, 1);
            $examinee_rate = round($test['examinee'] / $test['applicant'] * 100, 1);
            $test['passed_rate'] = $passed_rate;
            $test['examinee_rate'] = $examinee_rate;
        }
        //return $tests;
        return view('test.index', compact('tests'));
    }

foreachの箇所では、合格率と受験率を計算して配列に格納しています。

これをviewに渡します。引数にcompactを使用することでviewに変数を渡すことができます。

Viewのblade.phpからVue.jsの子コンポーネントにデータを渡す

テンプレートエンジンのbladeからvue.jsにデータを渡すにはv-bindとpropsを利用します。

子コンポーネントでprops定義した変数を親コンポーネントからv-bindで渡します。

bladeファイルの修正

views/test/index.blade.php

@extends('layouts.master')

@section('title', 'Page Title')

@section('content')
    <test-component :tests={{$tests}}></test-component>
@stop

Vue.jsコンポーネントファイルの修正

TestComponent.vue

<template>
    <div class="container">
        <v-layout>
            <v-flex>
                <v-card>
                    <v-card-title>
                        <h1>試験一覧</h1>
                    </v-card-title>
                    <v-card-text>
                        <v-data-table
                         :headers="headers"
                         :items="tests"
                         class="elevations-1"
                         hide-actions
                        >
                            <template v-slot:items="props">
                                <td>{{props.item.test_name}}</td>
                                <td>{{props.item.test_day}}</td>
                                <td>{{props.item.applicant | number_format}}</td>
                                <td>{{props.item.examinee | number_format}}</td>
                                <td>{{props.item.passed | number_format}}</td>
                                <td>{{props.item.examinee_rate}}</td>
                                <td>{{props.item.passed_rate}}</td>
                            </template>

                        </v-data-table>
                    </v-card-text>
                </v-card>
            </v-flex>
        </v-layout>
    </div>
</template>
<script>
export default {
    props: ["tests"],
    data: () => ({
        headers: [
            {text:'試験名', value:'test_name'},
            {text:'試験日', value:'test_day'},
            {text:'応募者', value:'applicant'},
            {text:'受験者', value:'examinee'},
            {text:'合格者', value:'passed'},
            {text:'受験率(%)', value:'examinee_rate'},
            {text:'合格率(%)', value:'passed_rate'},
        ]
    }),
    filters: {
        number_format(value) {
            if(!value) return '0'
            return value.toString().replace(/(\d)(?=(\d{3})+$)/g, '$1,')
        }
    }
}
</script>

表示

Vuetifyのv-cardの中でv-data-tableを使用します。

データの受け渡し

propsで先ほどv-bindで渡した変数を定義しています。

データの加工

フィルターで3桁区切りにカンマを打つ加工をしています。

変数にパイプでフィルターを通して、フィルター関数を用意することで実現可能です。