予約システムを作る #8：とりあえずの画面を作る 4

超暫定版の予約入力画面を作る。

新規予約コンポーネント

☆ resources/js/components/NewBookComponent.vue

<template>
    <div class="container">
        <form v-on:submit.prevent="submit" class="form-horizontal">
            <h3>ご予約内容</h3>
            <div class="row mb-3">
                <label for="resdate" class="col-sm-2 col-form-label">予約日</label>
                <div class="col-sm-8">
                    <input type="date" id="resdate" name="resdate" class="form-control" v-model="book.resdate">
                </div>
            </div>
            <div class="row mb-3">
                <label for="restime" class="col-sm-2 col-form-label">予約時間</label>
                <div class="col-sm-8">
                    <input type="number" id="restime" name="restime" class="form-control" v-model="book.restime">
                </div>
            </div>
            <div class="row mb-3">
                <label for="slot" class="col-sm-2 col-form-label">コース</label>
                <div class="col-sm-8">
                    <input type="number" id="slot" name="slot" class="form-control" v-model="book.slot">
                </div>
            </div>
            <div class="row mb-3">
                <label for="num" class="col-sm-2 col-form-label">人数</label>
                <div class="col-sm-8">
                    <input type="number" id="num" name="num" class="form-control" v-model="book.num">
                </div>
            </div>
            <br>
            <h3>ご予約者様情報</h3>
            <div class="row mb-3">
                <label for="name" class="col-sm-2 col-form-label">お名前
                    <span class="badge bg-danger text-white">必須</span>
                </label>
                <div class="col-sm-8">
                    <input type="text" id="name" name="name" class="form-control" v-model="book.name" required>
                </div>
            </div>
            <div class="row mb-3">
                <label for="email" class="col-sm-2 col-form-label">メールアドレス</label>
                <div class="col-sm-8">
                    <input type="email" id="email" name="email" class="form-control" v-model="book.email">
                </div>
            </div>
            <div class="row mb-3">
                <label for="tel" class="col-sm-2 col-form-label">電話番号
                    <span class="badge bg-danger text-white">必須</span>
                </label>
                <div class="col-sm-8">
                    <input type="tel" id="tel" name="tel" class="form-control" v-model="book.tel" required>
                </div>
            </div>
            <div class="row mb-3">
                <button type="button" class="btn btn-success">登録確認へ</button>
                <span> </span>
                <router-link v-bind:to="{name: 'books.timetable'}">
                    <button type="button" class="btn btn-success">前画面に戻る</button>
                </router-link>
            </div>
        </form>
    </div>
</template>

<script>
    export default {
        data: function() {
            return {
                book: {
                    resdate: '2021-01-01',
                    restime: '1900',
                    slot: '120',
                    num: '2',
                },
            }
        },
    };
</script>

ルーターの登録

app.js に 新規予約コンポーネントを追加する。
pathは /new、nameは book.new とした。
☆ resources/js/app.js

  ：
import NewBookComponent from './components/NewBookComponent';
  ：
const router = new VueRouter({
    routes: [
  ：
        {
            path: '/new',
            name: 'book.new',
            component: NewBookComponent,
        },
    ],
});
  ：