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

超暫定版の予約確認画面を作る。

入力画面から値を取得するには？

そもそもコンポーネント間でデータをやり取りするには、どうすればいいんだろうか？

以下ページに説明があると思うのだが、読んでも分からない・・・
※ ルートコンポーネントにプロパティを渡す | Vue Router

props を使えばいいと思うのだが、うまくいかないので、
とりあえず以下の方法で対応する。

☆ 呼び出し側 (例：予約入力画面の登録ボタン)

ボタンクリック時のイベントで this.$router.push として、
nameに呼び出し先の画面名、paramsに渡すパラメータを指定。

methods: {
    submit: function() {
        this.$router.push({
            name: 'book.confirm',
            params: {
                book: this.book,
            }
        });
    },
},

☆ 呼び出し先 (例：予約確認画面)

$route.params で呼び出し側で指定したパラメータが取得できる。
例) $route.params.book.name で予約入力画面で入力した氏名を取得

予約確認画面コンポーネント

ということで暫定版の予約確認画面
☆ resources/js/components/ConfirmComponent.vue

<template>
    <div class="container">
        <h1>ご予約の確認</h1>
        <form class="form-horizontal">
            <div class="row mb-3">
                <label for="resdate" class="col-sm-2 col-form-label">予約日</label>
                <div class="col-sm-8">
                    <input type="text" id="resdate" name="resdate" class="form-control" readonly v-model="$route.params.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="text" id="restime" name="restime" class="form-control" readonly v-model="$route.params.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" readonly v-model="$route.params.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" readonly v-model="$route.params.book.num">
                </div>
            </div>
            <div class="row mb-3">
                <label for="name" class="col-sm-2 col-form-label">お名前</label>
                <div class="col-sm-8">
                    <input type="text" id="name" name="name" class="form-control" readonly v-model="$route.params.book.name">
                </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="text" id="email" email="email" class="form-control" readonly v-model="$route.params.book.email">
                </div>
            </div>
            <div class="row mb-3">
                <label for="tel" class="col-sm-2 col-form-label">電話番号</label>
                <div class="col-sm-8">
                    <input type="text" id="tel" tel="tel" class="form-control" readonly v-model="$route.params.book.tel">
                </div>
            </div>
            <div class="row mb-3">
                <button type="button" class="btn btn-success">登録</button>
                <span> </span>
                <router-link v-bind:to="{name: 'book.new'}">
                    <button type="button" class="btn btn-success">前画面に戻る</button>
                </router-link>
            </div>
        </form>
    </div>
</template>

ルータの登録

☆ resources/js/app.js

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

予約入力画面の変更

予約入力画面の登録ボタンで予約確認画面へ遷移するように修正。
☆ resources/js/components/NewBookComponent.vue

  ：
    <button type="button" v-on:click="submit" class="btn btn-success">登録確認へ</button>
  ：
  <script>
  export default {
  ：
      methods: {
          submit: function() {
              this.$router.push({
                  name: 'book.confirm',
                  params: {
                      book: this.book,
                  }
              });
          },
      },
  };
</script>

動作確認

※ "npm run dev" でビルドするのを忘れずに
予約入力画面で入力した内容が確認画面に反映することを確認

---

予約システム