【Laravel】【Vue.js】【ホテル予約管理】予約詳細をダイアログに表示させる

前回までの状況はこちら

【Laravel】【Vue.js】【ホテル予約管理】予約一覧を表示する

最新ソースはこちら(gitHub)

https://github.com/takishita2nd/hotel-mng

この一覧の行をクリックすると、モーダルダイアログを出して、予約詳細を表示するように作り変えます。

必要な情報はすでに予約一覧で取得しているので、それをダイアログに表示させる、という手法で行きます。

        <div id="overlay" v-show="showContent" @click="closeModal">
            <div id="content">
                <table class="edit">
                    <tbody>
                        <tr>
                            <th>名前</th>
                            <td>{{ contents.name }}</td>
                        </tr>
                        <tr>
                            <th>住所</th>
                            <td>{{ contents.address }}</td>
                        </tr>
                        <tr>
                            <th>電話番号</th>
                            <td>{{ contents.phone }}</td>
                        </tr>
                        <tr>
                            <th>人数</th>
                            <td>{{ contents.num }}</td>
                        </tr>
                        <tr>
                            <th>宿泊部屋</th>
                            <td>{{ contents.room }}</td>
                        </tr>
                        <tr>
                            <th>宿泊日数</th>
                            <td>{{ contents.days }}</td>
                        </tr>
                        <tr>
                            <th>宿泊日</th>
                            <td>{{ contents.start_day }}</td>
                        </tr>
                        <tr>
                            <th>チェックアウト</th>
                            <td>{{ contents.checkout }}</td>
                        </tr>
                    </tbody>
                </table>
            <p><button @click="closeModal">close</button></p>
            </div>
        </div>

#overlay {
    z-index:1;
  
    position:fixed;
    top:0;
    left:0;
    width:100%;
    height:100%;
    background-color:rgba(0,0,0,0.5);
  
    display: flex;
    align-items: center;
    justify-content: center;
    
    #content{
        z-index:2;
        width:50%;
        padding: 1em;
        background:#fff;
    }
}

ダイアログとして表示する部分です。

overlayというのはダイアログのバックに表示するグレー表示のことです。

横と縦にでっかいdiv要素をtop0,left0に表示させる、というイメージですね。

その中にさらにdivを追加して詳細を表示を表示させます。

        data() {
            return {

　　　　　　　　// 中略

                showContent: false,
                contents: {
                    name: "",
                    address: "",
                    phone: "",
                    num: 0,
                    room: "",
                    days: 0,
                    start_day: "",
                    checkout: "",
                }

contentsは実際に予約詳細のダイアログに表示するデータです。

showContentはoverlayのv-showとバインドさせて、ダイアログの表示・非表示を切り替えるフラグです。

            openModal: function(id){
                for(var i = 0; i< this.registers.length; i++){
                    if(this.registers[i].id == id){
                        this.contents.name = this.registers[i].name;
                        this.contents.address = this.registers[i].address;
                        this.contents.phone = this.registers[i].phone;
                        this.contents.num = this.registers[i].num;
                        this.contents.room = this.registers[i].room;
                        this.contents.days = this.registers[i].days;
                        this.contents.start_day = this.registers[i].start_day;
                        this.contents.checkout = this.registers[i].checkout;
                        break;
                    }
                }
                this.showContent = true
            },
            closeModal: function(){
                this.showContent = false
            }

ダイアログ表示処理とクローズ処理です。

やっていることは、基本的にデータを設定して、フラグをON、閉じるときはフラグをOFFにする、というだけです。